EasyUI combobox默认选中,value为空问题

首先描述一下场景

现实开发中,我们可能会遇到多个页面需要同样的下拉框(比如枚举类型的状态)。而下拉框的值随时有变动的可能性。

如果按部就班的书写Select->option,遇到变动时,势必会修改很多地方。还会有改错的风险。

EasyUI combobox 本身提供读取json数据显示的功能。json数据可以来源于后端、也可来源于js文件中。

本文只讲述读取js文件中的json数据,读取后台json数据类似,不做过多介绍


首先页面加入标签

<input class="easyui-combobox" name="type"
url="/resources/type.json"
valueField="id" textField="text" />

其中url指定为本地的一个type.json文件,其他属性详见easyui 文档,json内容:

[

{"id":0,"text":"Java"},
{"id":1,"text":"C#},
{"id":2,"text":"C++"}
]

试运行之后,一切正常。下拉框默认选中第一行


但是在使用过程中,遇到了这样的问题,如果下拉框不操作,使用默认值。下拉框的值为空


F12调试也可以看到,value确实为空。网上推荐使用js再加载完成后操作一下选中问题。这样白白增加了代码工作。

解决方案:

json数据中加入默认选中属性!

即:

[

{"id":0,"text":"Java","selected":"true"},
{"id":1,"text":"C#},
{"id":2,"text":"C++"}
]

再次运行:


问题解决!



leave_ali@aliyun.com  欢迎多多交流

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
EasyUI Combobox 是基于 jQuery 和 EasyUI 的下拉列表组件,它能够帮助开发者快速地创建一个功能强大的下拉列表。 EasyUI Combobox 支持以下特性: 1. 自动完成:根据用户输入的内容,自动匹配下拉列表中的选项,并显示匹配的选项,用户可以从匹配的选项中选择一个或多个。 2. 延迟加载:可以通过 AJAX 动态加载下拉列表的数据,从而避免加载大量数据导致页面卡顿。 3. 多选:支持用户在下拉列表中选择多个选项。 4. 数据筛选:可以通过输入关键字来搜索下拉列表中的选项,从而快速筛选出符合条件的选项。 5. 自定义显示:支持自定义下拉列表中每个选项的显示方式,包括图标、文本、HTML 等。 6. 事件处理:支持 onChange、onSelect 和 onClick 事件处理,开发者可以根据自己的需求来实现相应的逻辑。 EasyUI Combobox 的使用非常简单,只需引入相关的 JS 和 CSS 文件,并在 HTML 页面中创建一个容器元素,然后在 JavaScript 中进行初始化即可。例如: ```html <head> <link rel="stylesheet" type="text/css" href="jquery.easyui.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head> <body> <input id="cc" class="easyui-combobox" data-options="valueField:'id',textField:'name',url:'data.php'"> </body> <script> $('#cc').combobox(); </script> ``` 以上代码中,通过设置 data-options 属性来指定 EasyUI Combobox 的配置,然后在 JavaScript 中调用 combobox() 方法来初始化即可。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值