<!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. perf原理再看

    vim ./arch/x86/kernel/hw_breakpoint.c perf如何控制采样的频率 perf采样不同的事件,得到的不是一样 cycles: 向PMU中增加不同的函数,增加不同 使用 ...

  2. bcc编译

    bcc编译,直接在docker里编,太方便:第一次深切体会到docker的强大: 1)下载bcc源码: 2) 把源码中的Dockerfile.ubuntu重命名为Dockerfile 3)sudo d ...

  3. JDBC数据源的驱动问题

    classes12.jar,ojdbc14.jar,ojdbc5.jar和ojdbc6.jar的区别,之间的差异 在使用Oracle JDBC驱动时,有些问题你是不是通过替换不同版本的Oracle  ...

  4. 建议 里面的sql查找单列 外面的sql查找所有列 这样方便查找数据

  5. IntellIJ IDEA 配置 Git，顺带解决Git Push rejected问题

    1.下载便携版本git https://git-scm.com/download/win 弹出的下载取消,重新选择 2.解压自压缩文件. 3.配置IDEA 4.测试 5.配置终端环境shell为bas ...

  6. [bzoj1062] [NOI2008]糖果雨

    Description 有一个美丽的童话:在天空的尽头有一个" 糖果国" ,这里大到摩天大厦,小到小花小草都是用糖果建造而成的.更加神奇的是,天空中飘满了五颜六色的糖果云,很快糖果 ...

  7. 停课day5

    一转眼,已经停课五天了. 高二大佬们已经都走了,在机房里面呆着,有时感觉很孤寂. 但是为了能学好竞赛,这些都是在所不惜的. 好像多打打比赛啊,可是cf要FQ,洛谷之类的比赛还不勤. 哎,先去学一发SP ...

  8. Angular Cookie 读写

    var app = angular.module('Mywind',['ui.router']) app.controller('Myautumn',function($scope,$http,$fi ...

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

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

  10. URAL1277 Cops and Thieves（最小割）

    Cops and Thieves Description: The Galaxy Police (Galaxpol) found out that a notorious gang of thieve ...