您当前的位置:首页 > 网站建设 > jQuery
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

jQuery EasyUI 表单插件 - Combobox 组合框

51自学网 2023-01-16 20:14:50
  jQuery

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框(combobox)显示一个可编辑的文本框和下拉列表,用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部,或者从列表中选择一个或多个现成的值。

依赖

  • combo

用法

从带有预定义结构的 <select> 元素创建组合框(combobox)。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">    <option value="aa">aitem1</option>    <option>bitem2</option>    <option>bitem3</option>    <option>ditem4</option>    <option>eitem5</option></select>

从 <input> 标记创建组合框(combobox)。

<input id="cc" class="easyui-combobox" name="dept"    data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 创建组合框(combobox)。

<input id="cc" name="dept" value="aa">
$('#cc').combobox({    url:'combobox_data.json',    valueField:'id',    textField:'text'});

创建两个依赖的组合框(combobox)。

<input id="cc1" class="easyui-combobox" data-options="    valueField: 'id',    textField: 'text',    url: 'get_data1.php',    onSelect: function(rec){    var url = 'get_data2.php?id='+rec.id;    $('#cc2').combobox('reload', url);    }"><input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

json 数据格式的示例:

[{    "id":1,    "text":"text1"},{    "id":2,    "text":"text2"},{    "id":3,    "text":"text3",    "selected":true},{    "id":4,    "text":"text4"},{    "id":5,    "text":"text5"}]

属性

该属性扩展自组合(combo),下面是为组合框(combobox)添加的属性。

名称 类型 描述默认值
valueField string 绑定到该组合框(ComboBox)的 value 上的基础数据的名称。value
textField string 绑定到该组合框(ComboBox)的 text 上的基础数据的名称。text
groupField string 指示要被分组的字段。该属性自版本 1.3.4 起可用。null
groupFormatter function(group) 返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例:
$('#cc').combobox({
下载地址:
jQuery EasyUI 表单插件 - Combotree 组合树
jQuery EasyUI 表单插件 - Combo 组合
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1