开发者社区> y0umer> 正文

jQuery EasyUI 组合框(ComboBox)

2012-03-23 883

简介： jQuery EasyUI 组合框(ComboBox)可以把一些HTML控件组合成一个控件，从而达到我们所期望的效果，下面介绍一下组合框详细用法：（查看演示）HTML代码：首先要定义个select     aitem1     bitem2     bitem3     ditem...
+关注继续查看

jQuery EasyUI 组合框(ComboBox)可以把一些HTML控件组合成一个控件，从而达到我们所期望的效果，下面介绍一下组合框详细用法：（查看演示）

HTML代码：首先要定义个select

  1. <select id="cc" name="dept"  style="width:200px;">
  2.     <option value="aa">aitem1</option>
  3.     <option>bitem2</option>
  4.     <option>bitem3</option>
  5.     <option>ditem4</option>
  6.     <option>eitem5</option>
  7. </select>


然后按照《jQuery  EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：

  1. $('#cc').combobox(options);

options是组合框的一些选项，比如我们可以利用远程的数据来生成一个提示框

  1. $('#cc').combobox({
  2.     url:'combobox_data.json',
  3.     valueField:'id',
  4.     textField:'text'
  5. });

下面我们来详细介绍一下选项的设置：

属性

width 数字 组件的宽度 auto
listWidth 数字 下拉列表的宽度 null
listHeight 数字 下拉列表的高度 null
valueField 字符串 基础数据值名称绑定到这个组合框 value
textField 字符串 基础数据的字段的名称绑定到这个组合框 text
editable 布尔 定义是否可以直接到文本域中键入文本 true
url 字符串 加载列表数据的远程URL null

事件

onLoadSuccess none 当远程数据成功加载时触发
onLoadError none 当远程数据加载失败时触发
onSelect record 当用户选择了一个列表项时触发
onChange newValue, oldValue 当文本域字段的值改变时触发

方法

select value 选择下拉列表中的一项
setValue param 设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。
getValue none 获取字段值
reload url 请求远程列表数据.

演示

 

 

http://jaychang.iteye.com/blog/850257

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript 前端开发
EasyUI combobox jQuery easyui EasyUI jquery jQuery combobox jQuery easyui combobox
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
我回来了.... 1190 即将放出ITSEC第一期所有培训视频 1504 [ITSEC]信息安全&#183;Web安全培训第一期客户端安全之UBB系列 1661 System.Runtime.InteropServices.COMException: Exception from HRESULT: 0x800AC472 2017 ITSEC TEAM 2013培训公开视频 1082
相关文章
授客
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
25 0
程序员大阳
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定，但是功能比较全面，而且入门比较简单，适合刚刚学习前端的童鞋们，此处拿出来讲讲如何使用EasyUI。
88 0
优惠券发放
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
1970 0
天空夜空星
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
1780 0
乌云上
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
1690 0
walb呀
基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
1614 0
walb呀
基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
1212 0
walb呀
JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
1234 0
科技探索者
jQuery easyUI datagrid 增加求和统计行
1170 0
技术小阿哥
jQuery EasyUI DataGrid动态合并单元格解决方案
1885 0
+关注
y0umer
高级网络安全技术员
文章
问答
视频
作者高分内容
更多
我回来了.... 1190 即将放出ITSEC第一期所有培训视频 1504 [ITSEC]信息安全&#183;Web安全培训第一期客户端安全之UBB系列 1661 System.Runtime.InteropServices.COMException: Exception from HRESULT: 0x800AC472 2017 ITSEC TEAM 2013培训公开视频 1082
文章排行榜
最热
最新
1 C++ STL容器和算法：详解和实例演示 38855
2 Go 方法接收器：选择值接收器还是指针接收器？ 37581
3 干掉 “重复代码”，这三种方式绝了！ 36022
4 万能架构设计：ES+Redis+MySQL，这套组合可应对80%业务场景（2） 30767
5 使用篇丨链路追踪（Tracing）很简单：链路拓扑 30012
6 如何提高光伏发电效能异常检出效率的实践案例 27740
7 日志服务 SLS 和开源 ELK 全面对比 27562
8 阿里云蔡英华：Landing Zone助力生态伙伴成为企业云治理服务专家 25031
9 如何画好一张架构图？（3） 22286
10 高性能的本地缓存方案选型，看这篇就够了！ 21026
11 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 14868
12 实践教程之体验PolarDB-X分布式事务和数据分区 9868
13 Python3，自从掌握了这个方法，再也不用print进行调试了。 13755
14 如何解决IoT数据入仓的客户实践 8173
15 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 334018
16 大数据&AI产品月刊【2023年4月】 4904
17 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 54909
18 编程中最难的就是命名？这几招教你快速上手 32334
19 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 50309
20 除了价格降70%，关于对象存储预留空间你还需要了解这些 31885
1 阿里云OpenSearch重磅推出LLM问答式搜索产品，助力企业高效构建对话式搜索服务 56
2 阿里云“通义听悟”正式公测：用户可免费领100小时转写服务 435
3 玖章算术NineData荣获信通院“生成式人工智能技术和应用优秀案例”奖 151
4 青莲网络携手阿里云推出Landing Zone & ITQM联合解决方案，助力企业高质量用云 51
5 专业的知识图谱应用门槛正在被不断降低 1510
6 Node内置模块 【操作系统os模块】 71
7 Node内置模块 【压缩zlib模块】 55
8 Node内置模块 【https模块】 55
9 Node内置模块 【crypto加密模块】 9787
10 断点调试(debug) 10301
11 一起来学ElasticSearch(九) 7418
12 重现一条简单SQL的优化过程 10299
13 图解LeetCode——543. 二叉树的直径 10111
14 一起来学kafka之整合SpringBoot基本使用 51
15 一起来学kafka之整合SpringBoot深入使用(一) 9754
16 Java的volatile 10108
17 Filter概述、接口及配置 10088
18 JDK20正式发布了GA版本，短期维护支持，以及JDK21预览 10231
19 浅谈分布式环境下WebSocket消息共享问题 10223
20 大数据&AI产品月刊【2023年5月】 87
相关课程
更多
jQuery开发教程
16086
43
去学习
推荐文章
现场直击：2023阿里云峰会精彩发布抢先看 AIGC主题征文开启，参与赢取富士拍立得 乘风伯乐招募令，邀请伯乐获取多重好礼！ 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载
相关实验场景
更多
JavaScript实现瀑布流布局
44
1.0小时
去实验