EasyUI下拉框级联

　　EasyUI用来实现后台界面还是可以的，毕竟面对的是小众群体而非广大的用户，简单为美。这里想聊的功能是一种下拉框的联动，比如我选中了下拉框A的某一项，那么下拉框B的选项就是甲乙丙丁，如果我选了A的另一项，那么B的选项就是ABCD，甚至不是一个下拉框了，而是一个文本框。直接看图吧：

　　这里的评测类型有3个选项：

　　当评测类型为“内部评测”时，评测人名称为一个邮箱地址

　　当评测类型为外部评测时，评测人名称也是一个下拉框，选项包括：A9评测、tina、丽娜等

　　当评测类型为邮件营销时，评测人名称还是一个下拉框，选项包括：Hyuna、Lynn等

　　好了，看完效果，我们来看下实现：

　　html添加easyUI的下拉框组件combobox给评测类型，评测人名称用textbox：

        <div class="fitem"><label>评测类型:</label><select class="easyui-combobox" name="testType" id="testType" style="width: 40%"required data-options="editable:false,panelHeight:'auto'"></select></div><div class="fitem"><label>评测人名称:</label><input id="testName" name="testName" class="easyui-textbox"></div>

　　js里定义评测类型的下拉框选项，动态生成评测人名称：

    var testTypes = [{id: '1', value: '内部评测'},{id: '2', value: '外部评测'},{id: '3', value: '邮件营销'}];var serivceProviders = [{id: '1', value: 'A9评测'},{id: '2', value: 'tina'},{id: '3', value: '丽娜'}];var submiters = [{id: '1', value: 'Hyuna'},{id: '2', value: 'Lynn'];$('#testType').combobox({valueField: 'id',textField: 'value',data: testTypes,onSelect: function (data) {var bingGo = data.id;if (bingGo != null && bingGo != "") {if (bingGo == '1') {$('#testName').textbox({prompt: 'Enter a email address...',validType: 'email'});$('#testName').textbox('clear');} else if (bingGo == '2') {$('#testName').combobox({valueField: 'id',textField: 'value',panelHeight: 'auto',editable: false,data: serivceProviders});} else {$('#testName').combobox({valueField: 'id',textField: 'value',panelHeight: 'auto',editable: false,data: submiters});}}}});

　　我们看上面js的处理，先定义好下拉框选项值，接着指定评测类型的下拉框属性，在页面加载时执行；然后定义评测类型的onSelect事件，当它选中不同的选项值时去动态生成不同的评测人名称。这里注意下，combobox这个组件必须指定选项的key和value，它要跟你的选项对应上。我这里是用的是id和value，也就是我的选项数组testTypes里指定的key值。默认值是value和text，就是说，如果不指定这两个属性，那么下拉框选项数组里的key就应该用它们俩：

　　panelHeight指定下拉框的高度，‘auto'是让它根据选项值自动适应；editable指定下拉框是否可编辑，false为不可编辑。当然你的选项值也可以调后台接口获取，比如我的评测类型通过getTestTypes这个url去后台查询后返回获得：

$('#testType').combobox({url: '/getTestTypes',valueField: 'id',textField: 'value',onLoadSuccess: function (none) {$('#testType').combobox('select', "All")}});

　　注意后台返回的json里依然要指定id和value，返回的内容应该类似testTypes数组。上面给了个默认值All，这是在从后台调用成功后添加的选项，它的id也是All。

转载于:https://www.cnblogs.com/wuxun1997/p/10904641.html

EasyUI下拉框级联相关推荐

级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
axure 如何设置选项联动_Axure下拉框级联操作
现实生活中有很多的下拉框是级联操作的,即因为第一个下拉框的选择,影响到后面的下拉框的选择的列表的数据.或许在代码中,这些操作相对比较简单,通过前一个下拉框的选择项来控制后一个下拉框的数据的动态添加.那 ...
Axure下拉框级联操作
现实生活中有很多的下拉框是级联操作的,即因为第一个下拉框的选择,影响到后面的下拉框的选择的列表的数据.或许在代码中,这些操作相对比较简单,通过前一个下拉框的选择项来控制后一个下拉框的数据的动态添加.那 ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
easyui下拉框值改变
EasyUI在web开发中常用到, 下拉框是表单元素的一种, <select id="consumerType" name="consumerType" ...
jquery easyui下拉框多选和原生多选下拉多选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
easyui下拉框option_js和jQuery以及easyui实现对下拉框的指定赋值实例分享
本文主要为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. js实现: 1. 通过让第i个o ...
easyUI下拉框默认选中和联动、内容回显
<td><input id="Area" name="Area" type="text" style="widt ...
Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)
先上图这中间遇到grid分页和下拉comboBox级联(用户.地域) 源代码如下: /**//* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, ...

EasyUI下拉框级联

EasyUI下拉框级联相关推荐

最新文章

热门文章