EasyUI中combobox的代码实例
2013-05-30 23:25
357 查看
<!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>
<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开启搜索自动完成功能的实例代码
- EasyUI中combobox的代码实例
- EasyUI中combobox的使用方法和一个代码实例
- EasyUI中combobox的代码实例
- EasyUI在表单提交之前进行验证的实例代码
- EasyUI combobox加入请选择 [.net后台代码]
- EasyUI在表单提交之前进行验证的实例代码
- easyui下拉框easyui-combobox input class=easyui-combobox 及控制层代码
- EasyUI中combogrid的代码实例
- Ext之Combobox的远程加载数据实例（附前后台代码）
- EasyUi+Spring Data 实现按条件分页查询的实例代码
- 实例：Easyui的combobox实现动态数据级联
- easyui 1.5+spring mvc +mybatis实例代码
- jquery-easyui combobox combogrid 级联不可编辑实例
- EasyUI中Accordion使用的代码实例
- jQuery easyUI combotree和combobox使用实例
- EasyUI创建人员树的实例代码
- flex3 comboBox 变身可输入可过滤搜索下拉选项，实例代码片段
- easyUI实现(alert)提示框自动关闭的实例代码
- EasyUI中calender控件使用的代码实例