Question

我有一个包含三个选择字段的表单。我希望第二个选择基于第一个选择填充，然后第三个选择基于第二个选择填充。所以财产类型 - ＆gt;县 - ＆gt;市。我的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（）中。这工作正常。我的问题是，当你尝试编写第二个函数来填充第二个选择（城市）时，它不会触发任何东西。这是我的第二个功能，也在准备好的内部。

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

}）;

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

提前致谢。

P.S。如果已经回答了这个问题，请随意指出我正确的方向，我无法在任何地方找到这个主题。

Answer 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>相关联。

您可以恢复更改代码：

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文档中阅读相关内容。它被称为“事件委托”。

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

1 个答案: