JQuery EasyUI是一个基于jQuery的UI插件集合，提供了丰富的ui组件，其中包含了Combobox组件。Combobox可以用于数据选择，下拉框选择等场景。在JQueryEasyUI框架下，Combobox的取值和绑定方法如下所示：
Combobox的绑定
使用以下代码可以将Combobox和一个本地数组进行绑定：
<input class="easyui-combobox" id="myCombobox" data-options="valueField:'value', textField:'text', data:dataArray">
上述代码中，dataArray是一个包含键值对的本地数组，其中value是值对应的字段名，text是显示对应的字段名。
如果需要绑定远程数据源，需要调用jQueryEasyUI的AJAX方法获取数据，如下所示：
<input class="easyui-combobox" id="myCombobox" data-options="valueField:'id', textField:'name', url:'getData.php'">
getData.php是一个返回查询结果JSON数据的脚本，其中id是值对应的字段名，name是显示对应的字段名。
Combobox的取值
Combobox中选中的值可以通过以下方式进行获取：
var myValue = $('#myCombobox').combobox('getValue');
getValue()方法可以获取当前选中值对应的valueField。
同时，如果需要设置Combobox的选中状态，可以使用以下方式：
$('#myCombobox').combobox('setValue', 1);
setValue()方法可以通过指定valueField来指定选中项。
示例代码：
以下是一个基于本地数组和远程数据源的Combobox示例代码。
- 基于本地数组的Combobox示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery EasyUI Combobox示例</title>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.6.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.6.2/jquery.easyui.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
var dataArray = [{value: '1', text: '选项一'}, {value: '2', text: '选项二'}, {value: '3', text: '选项三'}, {value: '4', text: '选项四'}, {value: '5', text: '选项五'}];
$('#myCombobox').combobox({
valueField: 'value',
textField: 'text',
data: dataArray
});
$('#btnGetValue').click(function () {
var myValue = $('#myCombobox').combobox('getValue');
alert(myValue);
});
$('#btnSetValue').click(function () {
$('#myCombobox').combobox('setValue', '3');
});
});
</script>
</head>
<body>
<div class="container">
<input class="easyui-combobox" id="myCombobox">
<br>
<button type="button" class="btn btn-primary" id="btnGetValue">获取选中值</button>
<button type="button" class="btn btn-primary" id="btnSetValue">设置选中值为3</button>
</div>
</body>
</html>
- 基于远程数据源的Combobox示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery EasyUI Combobox示例</title>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.6.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.6.2/jquery.easyui.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myCombobox').combobox({
valueField: 'id',
textField: 'name',
url: 'getData.php'
});
$('#btnGetValue').click(function () {
var myValue = $('#myCombobox').combobox('getValue');
alert(myValue);
});
$('#btnSetValue').click(function () {
$('#myCombobox').combobox('setValue', '3');
});
});
</script>
</head>
<body>
<div class="container">
<input class="easyui-combobox" id="myCombobox">
<br>
<button type="button" class="btn btn-primary" id="btnGetValue">获取选中值</button>
<button type="button" class="btn btn-primary" id="btnSetValue">设置选中值为3</button>
</div>
</body>
</html>
在这两个例子中，绑定了一个Combobox，并演示了如何获取和设置选中值。在应用开发中，可以根据具体的业务需求，使用本地数组或者远程数据源进行绑定。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQueryEasyUI框架下的combobox的取值和绑定的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 