Question

如何将下拉列表的选定值设置为另一个的选定值？

以下代码显示了如何正确完成此操作。

ASPX

<asp:DropDownList ID="ddl1" RunAt="Server" DataValueField="ID" DataTextField="ID" AppendDataBoundItems="true"/>
<asp:DropDownList ID="ddl2" RunAt="Server" DataValueField="ID" DataTextField="TEXT" AppendDataBoundItems="true"/>

JQUERY

$("#<%= ddl1.ClientID %>").change(function() {
    var Code = $(this).val();
    $("#<%= ddl2.ClientID %>").val(Code);
});

使用 jQuery Mobile 时，DataTextField会呈现为上标代码不会更新的span标记。

问题

如何修改上面的代码以适应这个？

http://jsfiddle.net/E28WW/

Answer 1

存储第一个选择菜单中的值，然后在第二个选择菜单中查找它。选择它 .prop('selected', true);，然后致电.selectmenu('refresh')。

<强> Demo

$(document).on('pageinit', function () {
  $(document).on('change', '#ddl1', function () {
    var selected = $(this).val();
    $('#ddl2 option[value="' + selected + '"]').prop('selected', true);
    $('#ddl2').selectmenu('refresh');
  });
});

我使用的pageinit相当于.ready()。这是jQM的一个特殊事件。

Answer 2

您是否检查过change函数实际被调用。脚本是否提供了脚本标记的全部内容？

在加载之前，函数不会绑定到事件，使用$(document).ready();将事件绑定到控件。

$(document).ready(function() {
    $("#<%= ddl1.ClientID %>").change(function() {
        var Code = $(this).val();
        $("#<%= ddl2.ClientID %>").val(Code);
    });
});

使用jQuery同时设置两个下拉列表的选定值

2 个答案: