浏览器控制台中实现对单选按钮操作后实现自动触发操作
场景描述#
由于实际工作中需要手动录入一些比较繁琐的事情，比如：需要从单选框中筛选出符合要求的信息，然而这单选框的选项有特别的多，需要人眼手动匹配太过繁琐
示例说明#
选择省份后，会发送对应的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('事件名')
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）