我的页面有三个 html 选择标签。
我希望这三个选择标签具有以下功能:
当我更改 selectA 时,selectB 会根据 selectA 自动更改。 当 selectB 的选项已创建时,当我更改 selectB 而不是 selectC 时,会根据 selectB 自动更改。
(
例如……
首先selectA的选项有singer,movie star,selectB就空着。
当歌手选项选中时,selectB 自动创建选项“Lady Gaga”、“Celine Dion”、“Whitney Houston”,如果创建了三个歌手,当我选中“Lady Gaga”时,selectC 将创建“生日”、“Facebook”、“google+”选项。
选中电影明星选项时,selectB 自动创建选项“Bruce Willis”、“Matt Damon”、“Will Smith”,如果已创建三个电影明星,当我选中“Bruce Willis”时,selectC 将创建“生日” , "Facebook", "google+"选项。
)
我的问题是...当我更改 selectB 时,$("#selectB_id").change() 不起作用
以下是我的javascript代码:
$(function(){
$("#lineselect").change( function() {
$.ajax({
url: '/lineflow/ajaxgetselect',
type:'POST',
data:{ service_id:$("#lineselect option:checked").val() , level:1 },
success: function( res ){
var obj = jQuery.parseJSON(res);
if( $("#lineselect").val() == 0 )
{
$("#second_li").html("");
$("#third_li").html("");
}
else if( $("#lineselect").val() == 1 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
$("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#service_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
}
else if( $("#lineselect").val() == 2 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<input type="text" id="url_name" name="url_name"></input>');
}
else if( $("#lineselect").val() == 3 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#url_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
}
},
error: function(obj, status, err){}
});
});
$("#service_type").change( function() { // this change not work!!!
$.ajax({
url: '/lineflow/ajaxgetselect',
type:'POST',
data:{ service_id:$("#service_type option:checked").val() , level:2 },
success: function( res ){
var obj = jQuery.parseJSON(res);
$("#third_li").html("");
$("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#service_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
},
error: function(obj, status, err){}
});
});
});
最佳答案
在这一行:
$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
如您所见,在附加事件处理程序之后,您将向 DOM 添加 #service_type
元素。
为此,您必须使用事件委托(delegate)。这可以通过 jQuery 中的 .on()
方法来完成:
$('#second_li').on('change', '#service_type', function () {
$.ajax({
//
});
});
- 请注意,您的
#second_li
元素在页面上必须是静态的。否则使用另一个选择器。
引用资料:
-
.on()
- jQuery API 文档
关于javascript - jQuery change() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16909432/