綁定表單中兩個選擇元素的最佳方法？

Question

綁定表單中的兩個select元素的最簡單方法是什么，以使第二個select元素具有與第一個選擇相關的option元素？

jQuery中有直接方法嗎？

Answer 1

當您在選擇列表中選擇一個選項時，將觸發“ onchange”事件。 因此，使用jQuery或本機JS，您可以將change事件綁定到第一個Select上，這樣它將更新第二個select的選項。

http://jsfiddle.net/aaronfrost/kxdUb/

Answer 2

初始主選擇后，創建幾個選擇元素。 隱藏這些子選擇，不給它們一個name屬性，而是給它們一個與主選擇的值相同的類。

<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並為其指定名稱屬性。

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

更新：我確保子選擇項被隱藏，並且每次主選擇項更改時都沒有給它們命名。

Answer 3

您也可以在data屬性中使用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

您也可以查看這個小提琴 。

它與Aaron Frost的示例相似，不同之處在於，它還將值放入選項元素中。