How To Load Event In First <Option>

[100yen]

Hi, again. One more question:  

 

When I select a primary category from  first <select> menu, the ajax response return and fill the sub category data into  second <select>menu. When this happen, I expect the second <select> menu will automatically call ajax object to retrieve corresponding product data. However, it doesn't work that way. When the second menu loads, it doesn't do anything unless I expand the menu select a option, then it will retrieve the product. 

 

I realized that the reason being is I have only one event 'onchange' assigned to the event listener. So I modified my script to add multiple events:

 

utility.addEvent(utility.$('sub_category_modal'), 'change', load_sub_cat);
utility.addEvent(utility.$('sub_category_modal'), 'load', load_sub_cat);

I add an event listener to watch for 'load' event so that when second <select> first load, it will trigger the same function of load-sub_cat to load subcategories. 

 

So far only the first 'change' event works. The second 'load' event doesn't work, I suspect the 'load' is not the correct type but I am not sure which one will work.  Pleas again give some advise. thanks. 

 

[HartleySan]

100yen, what do you mean by the following?

"When the second menu loads, it doesn't do anything unless I expand the menu select a option, then it will retrieve the product."

 

I can say the following conclusively:

- There is no onload event for select elements.

- You very likely want to use the onchange event. If I'm understanding you correctly, then when you select something from a menu, an Ajax call is made to populate a second menu. When something is selected from that second menu, then you want to load the corresponding product info, yes?

 

Please clarify what you're trying to achieve, as it's not clear.

Thank you.

[100yen]

Hi, HartleySan. Thanks for replying. 

 

yes, this thing can be confusing. But you are right about most of part until the second menu is populated.

 

I want a feature similar to jQuery $('#second_select :first').click( ) that It asks the first<option>  to run after it has been populated. Right now I have to pick an option inside the second <select> to make it run (which trigger the 'change' event). 

 

In short,  I want a 'onload' event or something similar so when the second menu is loaded, and it run instantly. 

 

But as you mentioned there is no 'onload' event for select element, then any alternative solution? 

[HartleySan]

Of course there is an alternate solution.

When you populate the second menu, simply grab the value of the first option, and then use that value to make an Ajax call for the product info.

 

That make sense?

[100yen]

Hi, HartleySan, 

 

the script is fully work now after follow your instruction. Thanks.

 

What I do is grabbing first option value and making an ajax call insert the handleResponse function of first menu. That solves the problem. 

[HartleySan]

Glad you got it working.

Sorry I didn't understand what you wanted originally.