jQuery模拟select选中事件
上个例子:
图中有三个select
,正常的逻辑的是这样的:
选择第一个select
后,触发第二个select
,
选择第二个select
后,触发第三个select
。
可是,当你选择第一个select
后,触发第二个select
后,第三个select
会没有反应。
因为没有触发change
事件。
这时怎么触发呢?
很简单,只要这样:
$('form#maogz select[name="post_cat2"]').change();
这个问题本来是在给客户做wordpress主题修改时遇到的,详细的代码比较多,这里还包含了ajax
,仅供参考:
var ajaxurl = $('form#maogz').attr('action'); var dataID = $("select[name='post_cat']").val(); var data = { action: 'post_cat2', dataID: dataID, } $.post(ajaxurl, data, function(response) { if ( $.trim(response) ) { // alert('获取二级分类成功'); $('form#maogz select[name="post_cat2"]').empty(); $('form#maogz select[name="post_cat2"]').append(response); $('form#maogz select[name="post_cat2"]').change(); } else { // alert('获取二级分类失败'); $('form#maogz select[name="post_cat2"]').empty(); $('form#maogz select[name="post_cat2"]').append('<option value="">该分类没有二级分类</option>'); } }); $("select[name='post_cat']").change(function(){ var ajaxurl = $('form#maogz').attr('action'); var dataID = $("select[name='post_cat']").val(); var data = { action: 'post_cat2', dataID: dataID, } $.post(ajaxurl, data, function(response) { if ( $.trim(response) ) { // alert('获取二级分类成功'); $('form#maogz select[name="post_cat2"]').empty(); $('form#maogz select[name="post_cat2"]').append(response); $('form#maogz select[name="post_cat2"]').change(); } else { // alert('获取二级分类失败'); $('form#maogz select[name="post_cat2"]').empty(); $('form#maogz select[name="post_cat2"]').append('<option value="">该分类没有二级分类</option>'); } }); }); $("select[name='post_cat2']").change(function(){ var ajaxurl = $('form#maogz').attr('action'); var data2ID = $("select[name='post_cat2']").val(); var data2 = { action: 'post_cat3', data2ID: data2ID, } $.post(ajaxurl, data2, function(response) { if ( $.trim(response) ) { // alert('获取二级分类成功'); $('form#maogz select[name="post_cat3"]').empty(); $('form#maogz select[name="post_cat3"]').append(response); } else { // alert('获取二级分类失败'); $('form#maogz select[name="post_cat3"]').empty(); $('form#maogz select[name="post_cat3"]').append('<option value="">该分类没有三级分类</option>'); } }); });