< !DOCTYPE html > <html > <head > <meta charset = "UTF-8" > <title > Basic ComboBox - jQuery EasyUI Demo < /title>
<link rel="stylesheet" type="text/css " href=".. / .. / themes /
default / easyui.css ">
<link rel="stylesheet " type="text / css " href=".. / .. / themes / icon.css ">
<link rel="stylesheet " type="text / css " href=".. / demo.css ">
<script type="text / javascript " src=".. / .. / jquery.min.js "></script>
<script type="text / javascript " src=".. / .. / jquery.easyui.min.js "></script>
<script type="text / javascript " >
$(document).ready(function () {
//增加一个自定义属性控制初始化的两次操作，oh yes
$("#sTwo ").combobox({
stopFirstChangeEvent: true,
onChange: function (n,o) {debugger;
var options = $(this).combobox('options');
if(options.stopFirstChangeEvent) {
options.stopFirstChangeEvent = false;
return;
}
alert("我是老大 ! ");
options.stopFirstChangeEvent = true;
}
});
});
$( function(){
var queryItemData = [{text : "产品名称", value : "prodName "},
{text : "年化收益率", value : "ars "},
{text : "到期收益率", value : "ytm "},
{text : "最低出借金额", value : "lowLendEdu "},
{text : "最高出借金额", value : "higLendEdu "},
{text : "出借周期", value : "lendingCycle "},
{text : "产品状态", value : "prodStatus "}];
var options01 = [{text : "等于", value : "eq "},
{text : "不等于", value : "ne "}];
var options02 = [{text : "等于", value : "eq "},
{text : "大于且等于", value : "ge "},
{text : "大于", value : "gt "},
{text : "小于且等于", value : "le "},
{text : "小于", value : "lt "},
{text : "不等于", value : "ne "}];
//初始化查询项目的下拉列表
$("#queryItem ").combobox({
valueField: 'value',
textField: 'text',
data : queryItemData,
panelHeight:170,
//注册Easy-UI, combobox的onSeclete事件
//目的：实现理财产品中，高级查询的“运算条件”随着“查询项目”的改变而发生联动。
onSelect : function(){
var myOptValue = $("#queryItem ").combobox("getValue ") ;
//1.清空原来的operType这个combobox中的选项
$("#operType ").combobox("clear ");
//2.动态添加"操作类型"的下拉列表框的option
if( myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus') ){
console.info("myOptValue = "+myOptValue);
$("#operType ").combobox({
panelHeight:50,
data : options01
});
}else{
$("#operType ").combobox({
panelHeight:140,
data : options02
});
}
//3.清空文本输入框——用户输入的条件
$("#userInputCondition ").val("");
} ,
onShowPanel: function () {
alert();
}
});
//初始化operType的下拉列表
$("#operType ").combobox({
valueField: 'value',
textField: 'text',
data : options02,
panelHeight:140,
});
$("#sTwo ").keyup(function(){
alert($("#sone ").val());
});
});
function test(){
alert();
}
</script>
</head>
<body>
<table cellpadding="0 " cellspacing="1 " border="0 ">
<tr>
<td>选择查询项目：</td>
<td><input id="queryItem " name="queryItem " class="easyui - combobox " style="width: 130px;
" ></td>
<!-- 用户选择运算条件 -->
<td><input id="operType " name="operType " class="easyui - combobox " style="width: 90px;
" data-options="panelHeight: 150 "/></td>
<!-- 用户输入文本条件 -->
<td><input id="userInputCondition " name="userInputCondition " type="text " style="width: 200px;
"></input></td>
</tr>
</table>
<h2>Basic ComboBox</h2>
<p>Type in ComboBox to try auto complete.</p>
<div style="margin: 20px 0 "></div>
<input type="text " id="sTwo " >
<input type="text " id="sone " οnchange="test()">
<select class="easyui - combobox " name="state " style="width: 200px;
">
<option value="AL ">Alabama</option>
<option value="AK ">Alaska</option>
<option value="AZ ">Arizona</option>
<option value="AR ">Arkansas</option>
</select>
</body>
</html>"
//销毁组件
///$('#xxx').combobox('destroy');
//隐藏选项
//$('#xxx').combobox('hidePanel');
