博客

easyui插件–combobox组合框

官方下载

官网下载



Jquery EasyUI 官网API



Jquery EasyUI 中文网API

使用说明

1、引入依赖的css和js文件

<link rel="stylesheet" href="<c:url value="/public/lib/easyui/easyui.css" />" type="text/css">
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/icon.css" />" type="text/css">
<script src="<c:url value="/public/lib/jquery/jquery-1.12.1.min.js"/>"></script>
<script src="<c:url value="/public/lib/easyui/jquery.easyui.min.js" />" type="text/javascript"></script>

2、初始化元素

（1） 使用带有预定义的元素创建组合框（不推荐）

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aitem1">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>
<!--或者使用带有预定义的input进行创建-->
<input  id="cc"  class="easyui-combobox"  name="dept"
  data-options="valueField:'id',textField:'text',url:'get_data.php'">

（2）使用原生html，通过js进行创建

 <select id="cc">
    <option value="1">1</option >
    <option value="2">2</option >
    <option value="3">3</option >
</select>
<!-- 或者使用input读取json文件 -->
<input  id="cc"  name="dept"  value="aa">

//select初始化
$('#cc').combobox({});
//input json动态获取数据初始化
$('#cc').combobox({
   url:'combobox_data.json',
   valueField:'id',
   textField:'text'
});

说明：使用json格式的数据注意对数据的配置，如以上的初始化数据示例：

[{"id":1,"text":"text1"},
{"id":2,"text":"text2"}]

常用属性–combobox扩展属性

常用属性 – 继承自combo插件

事件 — combobox扩展事件

事件 — 继承自combo组件

方法 — combobox扩展

方法 — 继承自combo组件