Лучший способ связать два выбранных элемента в форме?

Question

Какой самый простой способ связать два элемента select в форме, чтобы у второго элемента select было option элементов, связанных с первым выбором?

Есть ли прямой метод в jQuery?

Answer 1

Когда вы выбираете опцию в списке выбора, происходит событие «onchange». Таким образом, используя jQuery или собственный JS, вы можете привязать событие изменения к первому выбору, чтобы оно обновляло параметры второго выбора.

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>

Затем прикрепите событие изменения к главному выбору, где выбранное значение будет таким же, как атрибут класса соответствующего выбора. На основе значения показать выбор и дать ему атрибут name.

$('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

Вы также можете проверить эту скрипку .

Она аналогична примеру Аарона Фроста, за исключением того, что она также помещает значения в элементы опций.

Answer 5

Я бы предложил сделать ее функцией onchange от первого выбора, которая вызывает show () или hide () для опций второго выбора (и сбрасывает ее, чтобы она не оставалась в скрытой опции).