Question

在表单中绑定两个select元素的最简单方法是什么，这样第二个select元素与第一个选项有option个元素？

jQuery中有直接的方法吗？

Answer 1

当您在选择列表中选择一个选项时，将触发“onchange”事件。因此，使用jQuery或本机JS，您可以将change事件绑定到第一个Select，以便它将更新第二个选择的选项。

Answer 2

在初始主选择之后，创建几个选择元素。隐藏这些子选择，不要给它们一个名称属性，但给它们一个与主选择值相同的类。

<select class="main" name="name_of_main_select">
    <option value="value1-of-main-select">Value 1</option>
    <option value="value2-of-main-select">Value 2</option>
</select>

<select style="display:none" class="sub-select value1-of-main-select">...</select>
<select style="display:none" class="sub-select value2-of-main-select">...</select>

然后将更改事件附加到主选择，其中所选值将与其相应选择的类属性相同。基于值显示选择并给它一个名称属性。

$('select.main').change(function({
    $('select.sub-select').removeAttr('name').hide();
    $('select.'+$(this).val()).show().attr('name','sub_select_name');
});

更新：我确保隐藏了子选项，并且每次更改主选择时都没有给出名称。

Answer 3

您还可以在数据属性中使用json。

HTML

<select id="first">
    <option data-second='{ "names" : [{"name":"jack"},{"name":"john"},{"name":"joe"}]}'>Names</option>
    <option data-second='{ "names" : [{"name":"Porsche"},{"name":"Ferrari"},{"name":"Mercedes"}]}'>Cars</option>
    <option data-second='{ "names" : [{"name":"Blue"},{"name":"Red"},{"name":"White"}]}'>Colors</option>
</select>
<select id="second"></select>

的Javascript

$(document).ready(function(){
    $("#first").change(function(){
        $("#second option").remove();

        var names = $("#first option:selected").data('second').names;
        var newoptions = "";
        for(var i = 0; i < names.length; i++){
            newoptions+="<option value=" + names[i].name + ">"+ names[i].name +"</option>";                            
        }
        $("#second").append(newoptions);
    });        
});

http://jsfiddle.net/kamikazefish/kmQ7R/

Answer 4

我建议将它作为第一个选择的onchange函数，在第二个选择的选项上调用show（）或hide（）（并重置它，以便它不会留在隐藏选项上）。

Answer 5

您也可以查看this fiddle。

它类似于Aaron Frost的例子，除了它还将值放入你的选项元素。

绑定表单中两个选择元素的最佳方法是什么？

5 个答案: