今天搞Combobox的onChange事件搞了一下午,前端搞得我要吐血了。。。
最后找到一个合适的方法,记录一下。
1、原始方法
我想写个html代码的都对下拉选择标签select不陌生,关于这个标签,在不加任何渲染的情况下,想要触发其onchange事件是很简单的一件事情,如下:
<select id="sOne" οnchange="getVal()">
<option value="0">STEP DAY</option>
<option value="1">DAY</option>
</select>
紧接着书写js函数getVal()即可实现。
2、遇到曹操就没辙了
但是,当我们用EasyUI的CSS和JS来选择了select过后,想要向上面一样来触发其onchange事件,那就不行了的。如下:
<select id="sTwo" class="easyui-combobox" multiple="true" panelheight="auto" style="width: 100px" οnchange="getValTwo()">
<option value="">STEP DAY</option>
<option value="1">STEP</option>
<option value="0">DAY</option>
</select>
这里提供了一个js函数如下:
function getValTwo()
{
alert("Success!");
}
不管我们如何地点击select,始终都得不到客户端页面的响应,给你弹出一个Success!的窗体。
3、那么我们应该怎么办呢?
这里我们需要知道在EasyUI内的Combobox,有哪些事件才对的,我们可以翻开其帮助文档,其中有一个onChange事件,需要传递两个参数(newVal,oldVal),我们如何来注册这个事件以便后期响应呢?方法如下:
$(document).ready(function () {
$("#sTwo").combobox({
onChange: function (n,o) {
alert("我是老大!");
}
});
});
通过如上矫正过后,我们在切换select的值时就会收到客户端的响应,弹出一个“我是老大!“的对话框!