0

我有一个包含三个选择字段的表单。我希望第二个选择基于第一个选择填充，然后第三个选择基于第二个选择填充。所以属性类型->县->市。我的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');

});

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

提前致谢。

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

4

1 回答 1

0

这取决于您放在第二个下拉列表中的 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 文档中阅读相关内容。它被称为“事件委托”。

于 2013-04-15T19:21:35.733 回答