EasyUI中combobox的代码实例
来源：互联网 发布：移动云商城 2.0 源码 编辑：程序博客网 时间：2024/04/30 01:55
转载来自：http://www.devba.com/index.php/archives/935.html
<!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="#" onclick="loadData()">LoadData</a>
<a href="#" onclick="setValue()">SetValue</a>
<a href="#" onclick="getValue()">GetValue</a>
<a href="#" onclick="disable()">Disable</a>
<a href="#" onclick="enable()">Enable</a>
</div>
<p>单项选择的ComboBox: </p>
<select id="cc" 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 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 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" data-options="valueField:'id',textField:'text'" />
<br/>
<p>多项选择的ComboBox: </p>
<select id="cc4" name="state" style="width:200px;" data-options="url:'combobox_data.json',
valueField:'id',
textField:'text',
multiple:true,
panelHeight:'auto'
"/>
</body>
</html>
本文固定链接: http://www.devba.com/index.php/archives/935.html | 开发吧
- EasyUI中combobox的代码实例
- EasyUI中combobox的代码实例
- EasyUI中combobox的使用方法
- EasyUI中combobox的使用方法
- easyUI中combobox的使用方法
- Easyui中combobox的隐藏
- EasyUI中combobox的使用
- jQuery easyui combobox的使用 简单实例
- EasyUI中Accordion使用的代码实例
- EasyUI中combogrid的代码实例
- easyui的easyui-combobox
- EasyUI中Combobox的事件响应
- easyui中combobox与tabs的交互
- easyUI中combobox的使用心得
- 在EasyUI的DataGrid中嵌入Combobox
- easyui中combobox级联的实现
- easyui中combobox设置默认值的方法
- Jquery.EasyUI中combobox插件的使用
- IcePHP框架 新增 管理后台 自动 日志功能
- Java-String类型的参数传递问题
- servlet(3) - servlet知识点 - 小易Java笔记
- μC/OSIII——任务同步和通信（一）
- 用jquery实现的简单数据双向绑定
- EasyUI中combobox的代码实例
- 第8周 项目2 分支问题
- 用java写http server时候关于favicon.ico问题
- 最少插入几个字符可构成回文串（动归+滚动数组）
- Android 手势检测实战 打造支持缩放平移的图片预览效果（上）
- java中inputstream的使用
- 自旋锁、排队自旋锁、MCS锁、CLH锁
- Sublime Text 使用介绍/全套快捷键及插件推荐
- 设计好玩的3D文字效果
