<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>combobox</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
//动态加载数据集文件数据
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
}

//设置下拉框的值
function setValue(){
$("#cc").combobox("setValue","动态添加的列表值");
}

//获取当前选择的值
function getValue(){
var selectText=$("#cc").combobox("getValue");
alert("当前选择的是:"+selectText);
}
//禁用当前选择框
function disable(){
$("#cc").combobox("disable");
}
//启用当前选择框
function enable(){
$("#cc").combobox("enable");
}

$('#cc1').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
},
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}

});

</script>
</head>

<body>
<h2>ComboBox</h2>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="loadData()">LoadData</a>
<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>

<p>单项选择的ComboBox: </p>
<select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true,width:150">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br/>
<p>本地数据源的Combobox</p>
<input class="easyui-combobox" id="cc1" data-options="valueField:'lable',textField:'value',data:[{
lable:'java',
value:'java'
},
{
lable:'liferay',
value:'liferay'
},
{
lable:'jiar',
value:'jiar'
},
{
lable:'ruby',
value:'ruby'
}
]"/>
<br />
<p>来源网页数据的Combobox</p>
<input class="easyui-combobox" id="cc2" data-options=" valueField:
'id', textField: 'text',url: 'get_data1.php',onSelect: function(rec){

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

<br/>
<p>多项选择的ComboBox: </p>
<select id="cc4" class="easyui-combobox" name="state" style="width:200px;" data-options="url:'combobox_data.json',
valueField:'id',
textField:'text',
multiple:true,
panelHeight:'auto'
"/>
</body>
</html>

EasyUI中combobox的代码实例的更多相关文章

  1. Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  2. EasyUI 中 Combobox里的onChange和onSelect事件的区别

    EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...

  3. jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...

  4. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  5. easyui中combobox的值改变onchang事件

    今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...

  6. easyui中combobox 验证输入的值必须为选项框中的数据

    当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...

  7. easyui中combobox下拉内容进行分组

    需求:对combobox下拉内容进行分组. 效果样式: 代码: valueField:'paymethod_name', textField:'paymethod_name', data:[{ &qu ...

  8. Scala 深入浅出实战经典 第44讲： scala中view bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  9. easyui中combobox 取值

    <input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainTyp ...

随机推荐

  1. BZOJ4318 OSU!（动态规划+概率期望）

    设f[i][0/1]为考虑前i位,第i位为0/1时的期望得分(乘以是0/1的概率).暴力转移显然.前缀和优化即可. 但是这个前缀和精度无法承受,动不动就nan. 考虑增加一位的贡献.若之前后缀1的个数 ...

  2. hdu 3500 Fling (dfs)

    Fling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submi ...

  3. 安徽师大附中%你赛day9 T3 贵 解题报告

    贵 问题描述 苟先生的狼狗大军没有追上富先生, 所以他把它们都解雇了, 决定去雇佣一些更好的狗, 不过狗可是很贵的.苟先生有 \(w\) 元钱, 有 \(n\) 条狗可以雇佣, 第 \(i\) 条狗有 ...

  4. 洛谷P2568 GCD (欧拉函数/莫比乌斯反演)

    P2568 GCD 题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 输入输出格式 输入格式: 一个整数N 输出格式: 答案 输入输出样例 输入 ...

  5. POJ2391：Ombrophobic Bovines(最大流+Floyd+二分)

    Ombrophobic Bovines Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 21660Accepted: 4658 题目 ...

  6. 安卓中使用iconfont

    https://www.cnblogs.com/dongweiq/p/5730212.html

  7. hdu 1520Anniversary party 树形dp入门

    There is going to be a party to celebrate the 80-th Anniversary of the Ural State University. The Un ...

  8. OSI 七层模型和 TCP/IP 四层模型 及 相关网络协议

    简介 OSI 是理论上的模型,也就是一个统一的国际标准,现在的很多网络设备或者是网络协议都不同程度的精简了自己的所谓的模型,那么他们为了自己的通讯兼容都会参考这个OSI模型 TCP/IP 包括: TC ...

  9. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  10. java使用JNA调用dll

    1.自己搞一个dll出来.参考下面链接 http://blog.csdn.net/lqena/article/details/46357165. 2.下载jar jna-4.2.1.jar. 3.复制 ...