EasyUI中combobox的代码实例
<!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的代码实例的更多相关文章
- Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- EasyUI 中 Combobox里的onChange和onSelect事件的区别
EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...
- jquery easyUI中combobox的使用总结
jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...
- EasyUI中combobox的使用方法和一个代码实例
一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...
- easyui中combobox的值改变onchang事件
今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...
- easyui中combobox 验证输入的值必须为选项框中的数据
当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...
- easyui中combobox下拉内容进行分组
需求:对combobox下拉内容进行分组. 效果样式: 代码: valueField:'paymethod_name', textField:'paymethod_name', data:[{ &qu ...
- Scala 深入浅出实战经典 第44讲： scala中view bounds代码实例
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- easyui中combobox 取值
<input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainTyp ...
随机推荐
- iOS 定时器开发详情
目录 概述 NSTimer performSelector GCD timer CADisplayLink 一.概述 在平时的开发任务中,定时器是我们常用的技术.这一节我们来学习iOS怎么使用定时器. ...
- JAVA高并发处理------多线程
线程安全概念:当多个线程访问某一个类(对象或方法)时,这个对象始终都能表现出正确的行为,那么这个类(对象或方法)就是线程安全的. 分析:当多个线程访问myThread的run方法时,以排队的方式进行处 ...
- 【bzoj1977】[BeiJing2010组队]次小生成树 Tree 最小生成树+权值线段树合并
题目描述 求一张图的严格次小生成树的边权和,保证存在. 输入 第一行包含两个整数N 和M,表示无向图的点数与边数. 接下来 M行,每行 3个数x y z 表示,点 x 和点y之间有一条边,边的权值为z ...
- 【题解】Bzoj2125最短路
处理仙人掌 ---> 首先建立出圆方树.则如果询问的两点 \(lca\) 为圆点,直接计算即可, 若 \(lca\) 为方点,则需要额外判断是走环的哪一侧(此时与两个点在环上的相对位置有关.) ...
- 【NOIP 模拟赛】中值滤波 打表找规律
对于这样看起来不像什么算法也没什么知识点的题,一脸懵逼的话不是手推规律就是打表找规律......... 当然还有一些超出你能力之外的数学题...... #include <cstdio> ...
- Ubuntu下安装LNMP之php7的安装并配置Nginx支持php及卸载php
据了解,php7是比之前的版本性能快很多的.http://php.net/get/php-7.2.2.tar.gz/from/a/mirror 安装前也可提前将相关依赖库安装好,或者在安装php时若安 ...
- Spring源码解析-实例化bean对象
spring加载配置文件,AbstractApplicationContext类中的refresh方法起着重要的作用. @Override public void refresh() throws B ...
- API网关Kong部署和使用文档
KONG安装使用说明 系统版本:ubuntu14 1.下载安装包 $ wget https://github.com/Mashape/kong/releases/download/0.8.3/kong ...
- HDU 多校对抗第三场 L Visual Cube
Problem L. Visual Cube Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java ...
- Eclipse中的Web项目自动部署到Tomcat的webapp目录下
Eclipse中的Web项目自动部署到Tomcat 原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...