Question

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

• Using javascript and jquery, to populate related select boxes with array structure
• 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.