场景描述
由于实际工作中需要手动录入一些比较繁琐的事情，比如：需要从单选框中筛选出符合要求的信息，然而这单选框的选项有特别的多，需要人眼手动匹配太过繁琐
示例说明
选择省份后，会发送对应的ajax请求获取市级数据
1.后台数据格式
{
"bj":[
{ "name": "朝阳区", "short_name": "cz" }, { "name": "海淀区", "short_name": "hd" }, { "name": "大兴区", "short_name": "dxq" }
],
"sh":[
{ "name": "普陀区", "short_name": "pt" }, { "name": "虹口区", "short_name": "hk" }
],
"gz":[
{ "name": "天河区", "short_name": "th" }, { "name": "增城区", "short_name": "zc" },{ "name": "越秀区", "short_name": "yx" }
]
}
- 前端页面展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">手动触发单选框的change事件</button>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script>
<select name="" id="province">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<select name="" id="cities"></select>
<script type="text/javascript">
// 当省份发生变化时，则发送请求，获取对应市的数据
$('#province').on('change',function(){
// console.log($(this).val())
var chooseProvince = $(this).val()
$.get('http://localhost:3000/'+chooseProvince,function(data){
var htmlstr = ""
// console.log(data)
$('#cities').empty()
$.each(data,function(index,item){
$('#cities').append($('<option>').text(item.name).prop('value',item.short_name))
})
})
})
/*
$('#btn').click(function(){
$('#province').val('gz').trigger('change')
})*/
</script>
</body>
</html>
- 浏览器控制台测试
$('#province').val('gz').trigger('change')
结论
一般情况下页面在单选框选中后会触发其他的操作，如果单单的修改了单选框的值是无法触发其他的操作，所以需要分析页面代码中单选框选中后发生后触发了什么事件，然后通过代码的形式去自动触发事件的执行$(选择器).trigger('事件名')