【项目经验】 Html Select 遇上 Easyui

一、背景：

当我在做课表选择触发事件的时候，我发现了一个问题，就是我们直接用的easyui-combobox里面的的绑定事件（onchange）貌似触发不了，这是为什么呢？

二、结论及方法

1、原始方法

我想写个html代码的都对下拉选择标签select不陌生，关于这个标签，在不加任何渲染的情况下，想要触发其onchange事件是很简单的一件事情，如下：

<input id="test" class=”easyui-combobox” onchange="getVal()"><optionvalue="0">STEP DAY</option><optionvalue="1">DAY</option></select>

紧接着书写js函数getVal()即可实现。

 

2、遇到easyui就完了

但是，当我们用EasyUI的CSS和JS来选择了select过后，想要向上面一样来触发其onchange事件，那就不行了的。如下：

<selectid="sTwo"  class="easyui-combobox"multiple="true" panelheight="auto" style="width:100px" onchange="getValTwo()"><optionvalue="">STEP DAY</option><optionvalue="1">STEP</option><optionvalue="0">DAY</option></select>

这里提供了一个js函数如下：

functiongetValTwo(){   alert("Success!");}

不管我们如何地点击select，始终都得不到客户端页面的响应，给你弹出一个Success!的窗体。

 

3、那么我们应该怎么办呢？

这里我们需要知道在EasyUI内的Combobox，有哪些事件才对的，我们可以翻开其帮助文档，其中有一个onChange事件，需要传递两个参数(newVal,oldVal)，我们如何来注册这个事件以便后期响应呢？方法如下：

$(document).ready(function() {$("#sTwo").combobox({onChange: function(n,o) {alert("这样就可以了!");}});});