easyui-combobox与input组合下拉框,事件以及获取值
话不多说上代码:
这是一个简单的前台利用easyui-combobox 和input 组成的下拉框
<label class="layui-form-label"><font color="red">*</font>是否预警:</label>
<div class="layui-input-inline">
<input style="width:100%" class="easyui-combobox" name="blIsWarn" id="blIsWarn" editable="false" lay-verify="required" data-options="valueField:'value',required:true,textField: 'label',panelHeight:'auto',
data: [{
label: '否',
value: 'false'
},{
label: '是',
value: 'true'
}]"></input>
</div>
如图:
需求:监听下拉框选中的值,来 显示/隐藏 开始预警时间。
在网上找了许多方法,大多是easyui-combobox与select 组合成的下拉框
类似这种:
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
而他的取值和选择触发监听事件是这样:
//多选取值
$('#cc').combobox('getValues');
//单选取值
$('#cc').combobox('getValue');
//选择监听事件
$("#cc").combobox({
onSelect: function () {
}
});
当easyui-combobox与input组合框使用这种方式取值的时候一直是空格,并且onSelect 监听事件无效!
在研究了一个多小时后,终于找到了这个方法:
<input style="width:100%" class="easyui-combobox" name="blIsWarn" id="blIsWarn" editable="false" lay-verify="required" data-options="valueField:'value',required:true,textField: 'label',panelHeight:'auto',
data: [{
label: '否',
value: 'false'
},{
label: '是',
value: 'true'
}],onSelect:function(){
changeScenes();
}"></input>
在options后加上onSelect 选中事件,写好方法名,在js文件中再写好要用方法。
在测试了一番后显示可用!
JS文件代码:
function changeScenes() {
conlse.log("我被选中了");
}
经查文档后发现该段代码还可以在简洁一些:
<input style="width:100%" class="easyui-combobox" name="blIsWarn" id="blIsWarn" editable="false" lay-verify="required" data-options="valueField:'value',required:true,textField: 'label',panelHeight:'auto',
data: [{
label: '否',
value: 'false'
},{
label: '是',
value: 'true'
}],onSelect:changeScenes"></input>
选中以后就是取值的问题。之前百度以及官网提供的代码完全获取不到!
在后来看到一段大神的代码,受到启发:
$(function () {
$('#Select6').combobox({
onSelect: function (record) {
var jsonMap = { "year": record.pkey };
$.ajax({
url: "getYearHandler.ashx?action=getdata",
type: "post",
data: jsonMap,
datatype: "json",
success: function (data) {
var obj = eval('(' + data + ')');
dosomething(obj);
}
});
}
});
});
看着一段: onSelect: function (record) 传入的参数record是什么??
再看这一段:var jsonMap = { “year”: record.pkey } record.pkey??
原来 传入的record参数就是你下拉框中的所有值!record.pkey就是你选中的值。结合我们的代码是这样(我只截取到了方法那段):
onSelect:function(data){
changeScenes(data.value);
}
都是data.value吗?并不是,data后面是你在data中设置的名称:而我的data.value就是我要用于判断的值!
data: [{
label: '否',
value: 'false'
},{
label: '是',
value: 'true'
}]
到了js文件就好写了,直接传过来的参数就是你选中的值!可以直接判断。字符串判断
/**
* 监听事件
*/
function changeScenes(data) {
if(data == "true"){
$("#warnTimeDiv").css("display","block");
}else {
$("#warnTimeDiv").css("display","none");
}
}
至此功能实现!