javascript - Best way to bind two select elements in a form? - Stack Overflow

admin管理员组

文章数量:1317898

What's the simplest way to bind two select elements in a form, such that the second select element has option elements related to the first choice?

Is there a direct method in jQuery?

What's the simplest way to bind two select elements in a form, such that the second select element has option elements related to the first choice?

Is there a direct method in jQuery?

• javascript
• jquery
• html
• forms
• select

Share Improve this question Follow edited Mar 16, 2012 at 19:17 Dagg Nabbit 76.8k1919 gold badges114114 silver badges141141 bronze badges asked Mar 16, 2012 at 19:02 Khaled MahmoudKhaled Mahmoud 30211 gold badge77 silver badges2020 bronze badges 2

• @BenBarden: Maybe the question makes more sense now ^^ :P – Matt Commented Mar 16, 2012 at 19:04
• Ahhh. Much better. Thank you. – Ben Barden Commented Mar 16, 2012 at 19:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

When you select an option on a select list, the "onchange" event will fire. So, using jQuery or native JS, you can bind the change event to the first Select such that it will update the options of the second select.

http://jsfiddle/aaronfrost/kxdUb/

After your initial main select, create several select elements. Hide these sub-selects and don't give them a name attribute but give them a class that is the same as the main select's values.

<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>

Then attach a change event to the main select where the value selected will be the same as the class attribute of it's corresponding select. Based off the value show the select and give it a name attribute.

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

Update: I made sure that the sub selects were hidden and that they weren't given a name each time the main select was changed.

You could also use json in a data attribute.

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/kamikazefish/kmQ7R/

I'd suggest making it an onchange function from the first select, which calls show() or hide() on the options of the second select (and resets it, so that it's not left sitting on a hidden option).

You can check out this fiddle too.

It is similar to Aaron Frost's example, except that it also puts values into your option elements.

本文标签： javascriptBest way to bind two select elements in a formStack Overflow