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

Posted 2023-05-09

【中文标题】使用jQuery同时设置两个下拉列表的选定值

【英文标题】：Set the selected value of two dropdownlists simultaneously using jQuery

【发布时间】：2013-10-11 06:04:13

【问题描述】：

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

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

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/

【问题讨论】：

您的 JS / jQuery 代码是在出现在相关选择元素之后的脚本元素中，还是在文档就绪处理程序中？

以上所有指定代码都在同一页面上，顺序同上。

你的意思是这样吗？ jsfiddle.net/Palestinian/V6h5e

【参考方案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 的一项特殊活动。

【讨论】：

完美！感谢@Omar 的帮助以及澄清使用 Jquery Mobile 而不是 Jquery 时的差异。

能否调整此代码以双向工作，以便 ddl2 也选择 ddl1？无需复制所有代码？

奥马尔你是个天才。我谦虚的感谢和尊重。

【参考方案2】：

您是否检查过change 函数实际上正在被调用。你提供的脚本是脚本标签的全部内容吗？

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

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

【讨论】：

是的，这就是该页面的所有脚本。调试显示 val() 设置正确，$ 是 Jquery 中 $(document).ready 的简写。

请使用 JQM 页面事件，如 pageshow 等。元素事件

抱歉没有意识到这是一个 JQM 问题。

不，我很抱歉Nunners，因为我最初的问题并不清楚。我不认为这与问题有关，但它似乎是问题的原因。

@DreamTeK on jsfiddle 它可以工作，实际上，它会弄乱你的代码。 ***.com/questions/14468659/…