populate two select box from a select box

Question

Hello everyone,

I went through these topics for a solution to my problem but I think my question is a bit different.

• http://stackoverflow.com/questions/180451/using-javascript-and-jquery-to-populate-related-select-boxes-with-array-structur
• http://stackoverflow.com/questions/1255992/populating-a-2nd-select-box-binding-problem

I have 3 select boxes in my form. Named 'Category', 'Subcategory', 'Topic'.

Subcategory is populated from selection of Category and topic is selected from subcategory select box.

I have created a generalized function for populating select boxes using jquery.

I am calling that function (populateSelectBox) on the change event of parent select box.

Now the Subcategory select box is easily populated on the change event of Category select box but if the subcategory has only one option populated through ajax, the change event for subcategory is not fired as there is only one item in the subcategory select box.

What shall I do in that case in ?

Please help

Answer 1

You could test for the number of options received and if there's only one, trigger the change event manually:

$('#mySubCategorySelect').trigger('change');

or just:

$('#mySubCategorySelect').change();

Another way to go would be to have an option at the top of each select that is effectively a heading. Something like:

<select>
    <option>Please choose a category</option>
    <option>some option</option>
</select>

This would require the user to choose an option, even if only one exists.

Answer 2

Posting this answer as I needed to populate the third select box only on the change event of second select box.

Thanks to patrick for giving an idea of blank select option

So instead of adding an empty 'select option' through PHP, I modified my populateSelectBox function in such a way that it will automatically add a blank 'select' option to the response, like this $element.append('<option value="">Select</option>'); so that change event can be triggered by the user.