使用easyui combobox初始化+在input中触发下拉框+获取值
效果图:
1.html
1 | <input id= "alarmLeve" class = "easyui-combobox" name= "alarmLeve" style= "width:100px;display:inline-block;margin-right:20px;" /> |
2.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | //初始化 $( '#alarmLeve' ).combobox( { multiple: true , panelHeight: 'auto' , //自适应 valueField: 'id' , //绑定字段ID textField: 'text' , //绑定字段Name onLoadSuccess: function (){ $( ".combo" ).click( function (){ $( this ).prev().combobox( "showPanel" ); }); }, data:[{ "id" :1, "text" : "1" },{ "id" :2, "text" : "2" },{ "id" :3, "text" : "3" },{ "id" :4, "text" : "4" }], formatter: function (row) { var opts = $( this ).combobox( 'options' ); return '<input type="checkbox" class="combobox-checkbox" style="margin:0 5px;vertical-align: -2px" id="' + row[opts.valueField] + '">' + row[opts.textField] }, //获取数据URL //选择树节点触发事件 onSelect: function (row) { var opts = $( this ).combobox( 'options' ); var el = opts.finder.getEl( this , row[opts.valueField]); el.find( 'input.combobox-checkbox' )._propAttr( 'checked' , true ); }, onUnselect: function (row) { var opts = $( this ).combobox( 'options' ); var el = opts.finder.getEl( this , row[opts.valueField]); el.find( 'input.combobox-checkbox' )._propAttr( 'checked' , false ); } }) |
3.获取值
1 2 | $( '#comboboxlist' ).combobox( 'getValue' ); //单选时 $( '#comboboxlist' ).combobox( 'getValues' ); //多选时 |
示例:
4.得到input的字符串
1 | var l = $( '#alarmLeve' ).combobox( 'getText' ); //得到字符串 |
效果图:
【推荐】国内首个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)