jQuery模拟select选中事件

猫斯基  — jQuery


上个例子:

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>');
			}
		});
	});

阅读量:0 2020-12-22 18:09

返回顶部