jQuery EasyUI 组合框(ComboBox)

简介: 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

目录
相关文章
|
7月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
Easyui combobox 取值赋值解答
Easyui combobox 取值赋值解答
|
7月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
|
JSON 数据格式
easyUI 的combobox如何获取除valueField和textField外的三个值
easyUI 的combobox如何获取除valueField和textField外的三个值
|
存储 数据库
easyui-form表单提交combobox
easyui-form表单提交combobox
88 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
416 0
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
131 0