我的页面有三个html选择标记。
我希望这三个选择标签具有以下功能:
当我更改selectA时,selectB会根据selectA自动更改。 当selectB选项创建时,当我更改selectB而不是selectC时,根据selectB自动更改。
(
例如......
首先selectA的选项有歌手,电影明星,selectB只是空。
当选择歌手选项时,选择B自动创建选项“Lady Gaga”,“Celine Dion”,“Whitney Houston”,如果有三位歌手创作,当我选中“Lady Gaga”时,selectC将创建“生日”,“ Facebook“,”谷歌+“选项。
当选中电影明星选项时,选择B自动创建选项“Bruce Willis”,“Matt Damon”,“Will Smith”,如果有三位电影明星创建,当我选中“Bruce Willis”时,selectC将创建“生日” ,“Facebook”,“谷歌+”选项。
)
我的问题是...当我更改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){}
});
});
});
答案 0 :(得分:4)
使用事件委托:
$("body").on('change', '#service_type', function() {
// your code
});
答案 1 :(得分:4)
在这一行:
$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
如您所见,在附加事件处理程序之后,您将#service_type
元素添加到DOM。
因此,您必须使用事件委派。这可以通过jQuery中的.on()
方法完成:
$('#second_li').on('change', '#service_type', function () {
$.ajax({
//
});
});
#second_li
元素必须在页面上保持静态。否则使用另一个选择器。参考文献:
.on()
- jQuery API文档