jquery - 从另一个页面加载此下拉菜单后，Jquery 立即将值添加到选择语法中

Question

我有以下代码将元素从远程页面（在同一域下）加载到当前页面中。#Beijing 元素包含一个下拉菜单，我希望在加载后以选择语法在菜单中添加一些值。我想添加的价值是：

onChange="this.form['CAT_Custom_221342'].value=this[this.selectedIndex].value"

这是我得到的代码，请帮助我进一步编辑它，谢谢。

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

Answer 1

.load()接受一个回调函数，允许您在加载后访问正在加载的元素，见下文：

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

Answer 2

无需在 html 中插入 javascript 事件处理程序；这在调试时很难在逻辑上遵循，而且风格很差，因为您没有清晰地分离内容和功能。由于您使用的是 jQuery，因此请利用其事件绑定功能：

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

您可以在 DOM 就绪后立即绑定此事件处理程序，并且当您插入新内容时，更改处理程序将按预期工作。