Question

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?

Answer 1

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.