easyui中的下拉菜单是树形结构时如何实现onchange方法

Posted 2020-10-03 岁月时间

今天碰到一个问题就是我写的代码中的一个下拉列表显示的是树型菜单，代码如下（使用的是easyui）：

....

<tr>
<td>地区：</td>
<td><input type="combo" id="areaId" name="areaId"
class="easyui-combotree" data-options="{url:‘areaTree‘}"></td>
<td>区域属性：</td>
<td><input type="combo" id="regionId" name="regionId"></td>
</tr>

....

现在出现了一个问题，我要在地区的下拉列表中加一个onChange方法做一些其它处理，如果只是简单的combo,比如<input type="combo" id="regionId" name="regionId">

那么，我只需要在对它初始化时加上onChange事件就可以了，如下：

$(‘#regionId‘).combobox({
data : JSON.parse(‘${regionCombo}‘),
panelHeight : ‘auto‘,
editable : false,
// value:1

onChange: function (n,o) {

alert("我是老大!");

}

});

但是显示树形下拉列表后好像这种做法不行，最后追本思源，重新看了一遍easyui中的插件combo,与comboTree的介绍，然后把$(‘#areaId‘).combo({...})改为$(‘#areaId‘).combotree({...})如下：

$(‘#areaId‘).combotree({

onChange:function(newValue,oldValue){
alert(newValue);
}
});

 然后测试，发现通过。

原因是因为，组合树（combotree）是将combo与tree组合在一起实现 的，它本身继承 了combo的所有事件，但是前提是写的时候不能用$().combo要用$().combotree才可以