Jquery add value into select syntax right after this dropdown menu is loaded from another page

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');   
}

Without seeing your html we can't be sure what exactly you require. Is #Beijing actually the <select> element? — nbrooks
– nbrooks, Commented Aug 30, 2012 at 7:38

nbrooks · Accepted Answer · 2012-08-30 07:50:46Z

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.

edited Aug 30, 2012 at 7:50

answered Aug 30, 2012 at 7:34

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wang hai peng Over a year ago

Thanks nbrooks, I think I need your very first code since I need to keep this part for a reason, could you please please sent me the first version of your answer? Thanks

nbrooks Over a year ago

@wanghaipeng Sorry I'm not sure what you mean, I don't think I changed anything...what exactly do you need to keep the same? Oh if you mean the additional function wrapper on the outside, that's just a dom ready function which tells the browser not to run this until the dom is ready. If you already have one, just drop my inner code directly into yours.

Ohgodwhy · Accepted Answer · 2012-08-30 07:32:11Z

1

.load() accepts a callback function that allows you access to the elements you're loading after they're been loaded, see below:

function StateBeijingNext() { 
    $('#SuburbSelect').load('/Country/CN/_CN_suburbs.html #Beijing', function(){
      //the element has been successfully loaded into the DOM.
      //peform your custom logic against the #Beijing element here.
    });   
}

answered Aug 30, 2012 at 7:32

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

Jquery add value into select syntax right after this dropdown menu is loaded from another page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related