Populate two select box from a select box

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

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.