select的onChange监听不起作用问题

 

select的onChange监听不起作用问题

 

1.select的onChange监听不起作用问题解决办法

 

<select class="form-control" name="productName" id="product_name">

<option value="">请选择</option>

</select>

通常情况下我们直接设置如下方式监听，会发现onChange事件没有监听到select控件选择操作

<script type="text/javascript">

 

$("#product_name").change(function(){ 

$("#product_type option[value='"+$('#product_name option:selected').val()+"']").prop("selected",true);

});

 

</script>

解决办法，通常是放入页面加载初始化中$(document).ready(function(){});，这部分代码主要声明，页面加载后 “监听事件” 的方法

<script type="text/javascript">

$(document).ready(function() {

$("#product_name").change(function(){ 

$("#product_type option[value='"+$('#product_name option:selected').val()+"']").prop("selected",true);

}); 

 });

<script>

2.动态清空select控件中的option选项

 

$("#product_name").empty();

3.动态添加select控件中的option选项

 

for(var a=0; a<result.length; a++){

$("#product_name").append("<option value='"+result[a].id+"'>"+result[a].productName+"</option>");

$("#product_type").append("<option value='"+result[a].id+"'>"+result[a].productNum+"</option>");

} 

4.动态修改select控件中选中的option方法

 

$("#product_type option[value='"+$('#product_name option:selected').val()+"']").prop("selected",true);

 

 

原文链接：http://blog.youkuaiyun.com/ahou2468/article/details/72954974