Question

I have the following code that loads element from a remote page (under same domain) into the current page. The element #Beijing contains a dropdown menu, and I wish to add some value into the menu in select syntax after it is loaded. The value I would like to add is:

onChange=”this.form[‘CAT_Custom_221342’].value=this[this.selectedIndex].value”

and here is the code I’ve got, please help me to edit it furthur, thank you.

function StateBeijingNext() { 
$('#SuburbSelect').load('/Country/CN/_CN_suburbs.html #Beijing');   
}

Answer 1

There is no need to insert javascript event handlers into your html; this is difficult to follow logically when debugging, and is simply poor style, since you don’t have a clean separation of content and functionality. Since you are using jQuery, leverage its event binding capabilities:

$('#SuburbSelect').on('change', '#Beijing', function() {
    this.form['CAT_Custom_221342'].value = this[this.selectedIndex].value;
});

You can bind this event handler as soon as the DOM is ready, and when your new content is inserted the change handler will work as expected.