下拉列表中有很多项目,我可以与多个淹没共享这个列表吗?

drop down list has lots of items in the list, can I share this list with multiple drown downs?

本文关键字:共享 淹没 列表 我可以 项目 下拉列表      更新时间:2023-09-26

我有一个页面,在页面的3个左右的地方有相同的下拉列表。

下拉列表中有很多项目,我想知道我是否可以加载下拉列表形成一个单一的来源,而不是重复它这么多次(因为它是完全相同的选择选项为所有的下拉)。

这是可能的jquery?

当然。假设源下拉列表的ID为source,目标下拉列表的类为dest。这样就可以了:

$(function ()
{
    $('select.dest').html($('#source > option').clone());
});
<select id="list1">
 <option>One</option>
 <option>One</option>
 <option>One</option>
</select>
<select id="list2"></select>
<select id="list3"></select>

$(function() {
  var options = $("#list1 option");
  $("#list2").html(options.clone());
  $("#list3").html(options.clone());
});

您可以将相同的选项附加到多个选择列表中:

<select id="mySelect"></select>
<select id="list2"></select>
<select id="list3"></select>
var myOptions = {
    val1 : 'text1',
    val2 : 'text2',
    val3 : 'text3'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append(
        $('<option></option>').val(val).html(text)
    );
    $('#list2').append(
        $('<option></option>').val(val).html(text)
    );
    $('#list3').append(
        $('<option></option>').val(val).html(text)
    );
});

工作演示: http://jsfiddle.net/P2Xqd/

三个下拉列表如果不复制就不能真正共享相同的选项列表。您能够做到这一点的唯一方法是通过创建某种自定义下拉菜单。

例如,当您单击这个自定义下拉(不是一个真正的下拉)时,实际的下拉将被重新定位在您单击并展开的自定义下拉之上。然后,当选项被选中时,所选值被复制到您的自定义下拉列表中。然后,这个自定义下拉菜单需要一个隐藏的输入来保存要与表单一起传递的选定值。