在已更改的选择的更改事件上触发函数答案

【问题标题】：Fire a function on the change event of an already changed select在已更改的选择的更改事件上触发函数
【发布时间】：2013-04-08 00:43:50
【问题描述】：

我有一个包含三个选择字段的表单。我希望第二个选择基于第一个选择填充，然后第三个选择基于第二个选择填充。所以属性类型->县->市。我的js的一个基本思路如下。

$('.property_type').change(function(){
if(this.value == 'com'){
    $('.property_detail_county').html('MY HTML');
}else if((this.value == 'res')){
    $('.property_detail_county').html('MORE HTML');

}

所有这些都在 .ready() 中。这工作正常。我的问题是，当您尝试编写用于填充第二个选择（城市）的第二个函数时，它不会触发任何内容。这是我的第二个函数，也在 ready 里面。

$('.property_detail_county').change(function(){
console.log('Changed');

});

我的理论是第二个函数永远不会因为条件而被读取或加载。你们知道另一种方法吗？

提前致谢。

附：如果已经回答了这个问题，请随时为我指出正确的方向，我在任何地方都找不到主题。

【问题讨论】：

当用户选择一个值时触发 change 事件，而不是当您更改选择的内容时！
是的 .property_detail_county 是一个选择输入还是只是一些 div？如果您需要在使用 js 更改其值后触发选择的更改，请使用 trigger()
当您以编程方式更改第二个选项的值时，您需要手动触发.change() 事件。 .change() 不会在您使用代码更改值时调用，除非您使用代码专门触发它。
您可能正在寻找类似this
感谢您的回复。这很有帮助。

标签： javascript jquery forms select onchange

【解决方案1】：

这取决于您放入第二个下拉列表的 HTML。例如，如果 HTML 是这样的：

<div id="a"><select>...</select></div>

<div id="b">...</div>

你的 javascript 会这样做：

if(this.value == 'com'){
    $('.property_detail_county').html('<select>...</select>');
}

您已经完全替换了第二个 select 语句，甚至没有与之相关的任何更改。更改甚至与您替换的旧 <select> 相关。

您可以恢复更改代码：

if(this.value == 'com'){
    $('#b').html('<select id="sel_b">...</select>');
    $("#sel_b").click(function() {
        ... the stuff to do when 2nd one is clicked ...
    }
}

如果你定义一个函数来处理第二组东西，效果会更好。

注意还有其他方法可以做到这一点，您可以检测更改事件，因为它冒泡到 <div> 或 DOM 树上更高的某个元素。您可以在 jQuery 文档中阅读相关内容。这称为“事件委托”。

【讨论】：