Question

我想从现有下拉列表中填充dropdown2。我使用它的类来定位这个下拉列表。

此外，还希望将所选选项从下拉列表添加到dropdown2。

<asp:DropDownList ID="DropDownList1" runat="server" class="dropdown" EnableViewState="true" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>

                <select class="dropdown2"></select>

然后，在改变时我有这个：

$(".dropdown").change(function () {
    var selectedText = $(".dropdown option:selected").text();
    var selectedValue = $(".dropdown option:selected").attr('value')

    $('.dropdown option').each(function () {

        $(".dropdown2").append(new Option($(this).text(), $(this).attr('value')));
    });

    $(".dropdown2 option:contains(" + selectedText + ")").attr('selected', 'selected');
});

如何使用现有下拉列表填充选择和添加选项？

Answer 1

由于你正在使用asp.net下拉列表，你需要做一些黑客才能使它工作。 Asp.net事件将取代任何js事件并自动触发回发。

ASPX：

<asp:DropDownList ID="DropDownList1" runat="server" class="dropdown" EnableViewState="true" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
<select class="dropdown2"></select>
<script>
var valueChanged = '<%=ValueChanged%>'; // get the server side variable and assign its value to a js variable
$(document).ready(function () {
    if(valueChanged.toLowerCase() == 'true')
    {
    var selectedText = $(".dropdown option:selected").text();
    var selectedValue = $(".dropdown option:selected").attr('value')

    $('.dropdown option').each(function () {
    $(".dropdown2").append("<option id="$(this).attr('value')">$(this).text()</option");
    });

    $(".dropdown2 option:contains(" + selectedText + ")").attr('selected', 'selected');
   }
});

</script>

ASPX.CS：

public class Test
 {

   public bool ValueChanged = false;  // declare a public variable 
   protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{ 
   ValueChanged = true; // set the value to true on index change.
}

 }

使用现有下拉列表

1 个答案: