easyui-combox 下拉框选择默认值

最新推荐文章于 2022-07-25 09:50:00 发布
原创 最新推荐文章于 2022-07-25 09:50:00 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui-com

本文介绍了如何在EasyUI的Combobox组件中设置下拉框的默认选择值，提供了一段JavaScript代码示例，该代码在加载数据成功后自动选择第一项。

今天碰见一个问题，就是easyui-combox 下拉框选择默认值的问题。

这个问题百度了一下很简单。有一段代码很好用，希望能帮助以后的猿友们。

(function(){(“#selectCnq”).combobox({
url: ‘DataAction!getCNQList.action’,
valueField: “ID”,
textField: “Text”,
panelHeight: “auto”,
editable: false,
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = (this).combobox(“getData”);  
            for (var item in val[0]) {  
                if (item == “ID”) {(this).combobox(“select”, val[0][item]);
}
}
}
});

})

easyUI下拉框默认选中和联动、内容回显
dawnStart的博客
03-06 1257
<td> <input id="Area" name="Area" type="text" style="width:125px;padding-left: 10px;" /> </td> $(function() { //乡镇 $("#Area").combobox({ url : "${path }/geocodi...
easyui-combobox下拉框滚动条不显示&Java中的中文排序
菜鸟程序猿
09-05 4737
1、easyui-combobox下拉框滚动条不显示：
easyui combbox 显示默认值
09-10
easyui combbox 组件，如何显示默认值
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
10-21
主要介绍了jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
easyui的combobox设置下拉框默认选中某一项
12程序猿的博客
07-23 3883
JSP页面：可以这样写，提供option的选项, <input class="easyui-combobox" name="customerStatus" id="customerStatusList" data-options="valueField: 'value',textField: 'label', data: [{label: '未审核', value: '1'}, {label: '审核中', value: '2'}]" ,
EasyUI 之 下拉框默认选择第一个选项
等一个故事
06-29 4572
$('#loadType').combobox( { url : "${pageContext.request.contextPath}/QuestionType?couresId="+ courseId, editable : false, //不可编辑状态 cache : false, panelHeight : '150',//自动高度适合 valueField : 'questi
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
`easyui-combobox` 则是一个下拉选择框组件，允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见，可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件，它会在元素...
easyui-lang-zh_CN(汉化包).js
07-16
easyui日期，时间框汉化包，汉化easyui日期控件，时间控件。
easyui-lang-zh_CN.js，easyui汉化包
08-09
easyui插件的支持日期汉化，分页汉化，form表单提示汉化。
基于easyui-textbox的颜色选择器及源码
01-31
本文将深入探讨基于EasyUI的TextBox颜色选择器及其源码，帮助开发者理解这一组件的工作原理并实现自定义功能。 EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，使得开发者可以快速构建出美观、...
Combox,Option简单使用
12-04
Combox,Option两个控件的简单应用
combobox设置默认选项
08-14
ZK中combobox的设置，combobox默认选项的设置，
Easyui下拉菜单，并设置默认值
qq_41373328的博客
03-21 2336
<input class="easyui-combobox" id="workSheetType" name="workSheetType" style="width:150px;height:30px;"> $(function(){ $("#workSheetType").combobox({ url:"${pageContext.request.contextPath...
EasyUI combobox（多选下拉框）加载时设置默认值（设置默认选中值、设置默认选中前几项）
旭东怪的博客
12-29 6570
1 多选下拉框加载时设置默认选中值 unction BindMultiListCode(objId,comboxData,values){ $('#' + objId).combobox({ data: comboxData, valueField: 'Code', textField: 'CodeName', panelHeight: 'auto', editable: false, showbla
easyui的combobox默认选中第一个选项
reg183的专栏
07-25 3059
vardata=pmProjectSelect.combobox(‘getData’);//获取所有下拉框数据。//如果有数据的话默认选中第一条数据。//combobox默认选中第一个。
easyUI设置下拉列表默认值
qq970014558的专栏
04-18 4592
<input name="versionStatus" id="versionStatus" class="combo easyui-combobox" data-options="valueField:'id',textField:'name', required:true, editable:false, data:[{id:'0',name:'禁用'},{id:'1',name:'启用'
004--easyui的combobox设置下拉框默认选中某一项
热门推荐
Code_小生的博客
10-30 2万+
JSP页面：可以这样写，提供option的选项,<input class="easyui-combobox" name="customerStatus" id="customerStatusList" data-options="valueField: 'value',textField: 'label', data: [{label: '未审核', value: '1
easyui combobox 选中某个默认值
周振伟的博客
09-21 1万+
今天在做更新的时候，被如何让下拉框回显选中默认值问题困扰了一下，所以在网上搜罗了一些方法，最后尝试成功，记录一下。 下拉框初始化有几种方式：1.用js初始化                                                    2.用标签初始化 两者大同小异，只是写代码的位置不同而已。 今天记录的重点是，选中默认值要用到onLoadSuccess方法，举个栗
easyui combobox 默认选择集合中的第一项
world_the_begin的博客
03-30 1350
var json = $ht.form.ajaxS("fetchtStyleInfoAll", "","json");         if(json =="noRight"){             return;         }         $("#styleId").combobox({                data:json,                valueF...
easyui-combobox多选下拉框
最新发布
09-05
<think> 我们参考提供的引用信息来解答关于EasyUI combobox多选下拉框的实现方法和配置。 根据引用[1]和[2]，实现多选的关键配置是设置`multiple:true`，并且可以指定分隔符`separator`（默认是逗号）。 同时，在初始化时，如果需要设置默认选中的值，可以在`onLoadSuccess`事件中使用`setValues`方法，将字符串按分隔符分割成数组设置。 引用[3]提到在选中和取消选中时通过`getValues`获取值并赋值给隐藏域（或其他地方），这说明了如何实时获取多选的值。 引用[4]展示了后端获取数据的方法，但这不是前端配置的重点。 因此，我们可以总结如下： 1. 配置多选：`multiple: true` 2. 可选配置分隔符（例如分隔符为逗号）：`separator: ','` 3. 设置默认值：在`onLoadSuccess`事件中，使用`combobox('setValues', array)`，其中array是值的数组。 4. 获取多选的值：使用`combobox('getValues')`，返回的是数组，也可以用分隔符连接成字符串。 下面是一个完整的配置示例，参考引用[1]和[2]： ```javascript $('#comboId').combobox({ url: '...', // 数据源URL editable: false, // 是否可编辑 multiple: true, // 开启多选 separator: ',', // 分隔符，默认也是逗号，所以可以不写 valueField: 'id', // 值字段 textField: 'text', // 显示文本字段 onLoadSuccess: function() { // 设置默认值，假设默认值是一个用逗号分隔的字符串 var defaultValue = "value1,value2,value3"; $(this).combobox('setValues', defaultValue.split(',')); } }); // 获取选中的值（数组形式） var selectedValues = $('#comboId').combobox('getValues'); // 如果需要字符串形式，可以用分隔符连接 var selectedString = selectedValues.join(','); ``` 另外，引用[2]中还展示了在面板显示时调整面板高度的例子（根据选项数量动态调整高度），这也是一个常用的优化。 注意：在设置默认值时，`setValues`方法需要传入一个数组，所以我们把字符串用`split`方法分割成数组。 如果需要实时将选中的值更新到某个地方（如隐藏域），可以监听`onSelect`和`onUnselect`事件，例如： ```javascript onSelect: function(record) { var values = $(this).combobox('getValues'); $('#hiddenField').val(values.join(',')); }, onUnselect: function(record) { var values = $(this).combobox('getValues'); $('#hiddenField').val(values.join(',')); } ``` 这样，每次选择或取消选择时，隐藏域的值都会被更新为当前选中的值（以逗号分隔的字符串）。 以上便是EasyUI combobox实现多选下拉框的主要方法和配置。 </think> ### EasyUI Combobox 多选下拉框的实现方法与配置 要实现 EasyUI combobox 的多选功能，需通过以下关键配置和事件处理（参考引用[1][2][3]）： #### 1. **核心配置属性** ```javascript $('#yourCombo').combobox({ multiple: true, // 启用多选模式 [^1] separator: ',', // 值分隔符（默认逗号）[^1] valueField: 'id', // 值字段（如数据库ID） textField: 'name', // 显示文本字段 editable: false, // 禁止手动输入（推荐）[^2] url: 'data_source.json' // 数据源URL }); ``` #### 2. **设置默认值** 在 `onLoadSuccess` 事件中初始化选中值（引用[1][2]）： ```javascript onLoadSuccess: function() { // 将字符串（如"v1,v2"）转为数组设置 $('#yourCombo').combobox("setValues", "val1,val2".split(',')); } ``` #### 3. **获取选中值** ```javascript // 返回数组：["val1", "val2"] const values = $('#yourCombo').combobox('getValues'); // 返回逗号分隔的字符串（配置的分隔符） const str = values.join(','); ``` #### 4. **动态监听选择** 实时响应选择/取消操作（引用[3]）： ```javascript onSelect: function(record) { const currentValues = $(this).combobox('getValues'); console.log("当前选中值:", currentValues); }, onUnselect: function(record) { const currentValues = $(this).combobox('getValues'); console.log("取消后剩余值:", currentValues); } ``` #### 5. **高度动态调整** 根据选项数量自动调整下拉高度（引用[2]）： ```javascript onShowPanel: function() { const count = $(this).combobox('panel')[0].childElementCount; $(this).combobox('panel').height(count > 10 ? 200 : "auto"); } ``` #### 6. **后端数据示例（Java）** 返回数据需匹配 `valueField/textField`（引用[4]）： ```java public List<Map> getComboboxData(String code) { String sql = "SELECT id AS valueField, name AS textField FROM table"; // 执行查询并返回 List<Map> } ``` > **注意事项** > - 多选时数据源字段需唯一，避免重复值冲突 > - 大量数据建议启用分页（需配合 `pagination:true`） > - 默认值字符串格式需与 `separator` 配置一致 --- ### 相关问题 1. EasyUI combobox 多选时如何实现全选/全不选功能？ 2. 当 combobox 多选数据量过大时，应该如何优化性能？ 3. 如何将 combobox 多选的值提交到表单并后台接收？ 4. 在多选模式下，如何自定义下拉选项的显示样式？ [^1]: easyui combobox 多选 [^2]: EasyUI实现combobox下拉框多选以及取值 [^3]: 关于easyui combobox下拉框实现多选框的实现 [^4]: easyui combobox下拉框实现多选框以及全选、全不选的实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值