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。

EasyUI下拉框级联的更多相关文章

  1. [转]html 下拉框级联

    <html> <head> <title>html 下拉框级联</title> <meta charset="UTF-8"/& ...

  2. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  3. Jquery+Ajax下拉框级联查询

  4. Java easyui 下拉框默认选中第一个

    html代码: <tr> <td> <div style="margin-bottom:5px">计价方式:   <%--下拉框默认选中第 ...

  5. java 下拉框级联及相关(转)

    ActionLintsner都实现此接口,其它监听器可以监听的事件都可以被它捕获 public interface ActionListener extends EventListenerThe li ...

  6. MVC+knocKout.js 实现下拉框级联

    数据库:部门表和员工表 在控制器里面的操作: public ActionResult Index3() { ViewBag.departments = new SelectList(getDepart ...

  7. ajax,下拉框级联

    js代码: $(document).ready(function() { $("#type1").change(function(){ var type1Code=$(" ...

  8. easyui下拉框过滤优化

    项目中有个需求:编辑combobox的输入域会自动检索匹配项,当没有任何匹配项时,将combobox重置为初始状态. 处理方式:重写输入域的blur事件,判断当前值是否为加载的数据集的子集,如果不是则 ...

  9. 在easyui中如何修改combobox的下拉框的高度为自适应高度

    在easyui中,有时候easyui下拉框的高度比较高,如果我们的值比较少,而下拉框的高度很高的话看起来不好看,修改前效果如下所示: 要修改下拉框的高度和我们的值自适应的 话,只要添加一个panelH ...

随机推荐

  1. Python读excel——xlrd

    Python读excel——xlrd Python读取Excel表格,相比xlwt来说,xlrd提供的接口比较多,但过程也有几个比较麻烦的问题,比如读取日期.读合并单元格内容.下面先看看基本的操作: ...

  2. 接口调优——WebAPI 过滤器,IIS WebDAV

    目录 1.身份认证过滤器—AuthenticationFilter 2.Action 过滤器—ActionFilter 3.异常处理过滤器—ExceptionFilterAttribute 4.IS ...

  3. (一)python3.7的安装

    1.从官网https://www.python.org/下载相应版本的安装包.一般下载 executable installer,x86 表示是 32 位的,x86-64 表示 64 位的. 2.可选 ...

  4. redis五中数据类型

    MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加 ...

  5. eclipse跳转到exitCurrentThread

    1.在使用Eclipse时,用Debug模式运行springboot项目,结果总是在项目快启动成功的时候,跳转到exitCurrentException这个地方 2.方法:Eclipse->[P ...

  6. 【轉】mantis安裝

    一.mantis简介 可以看出,mantis是一个基于php技术的,个人觉得这个系统还是很完善的.  安装mantis,需要安装一下软件:  phpMyAdmin      下载地址https://w ...

  7. ***PHP preg_match正则表达式的使用 转载:https://www.cnblogs.com/kenshinobiy/p/4443600.html

    第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明 : "^The": 匹配以 "The"开头的字符串; &q ...

  8. postgresql学习笔记--基础篇 -psql工具

    --创建用户 CREATE ROLE pguser WITH ENCRYPTED PASSWORD 'pguser'; --创建表空间目录 mkdir -p /database/pg10/pg_tbs ...

  9. 2019-2020-1 20199312《Linux内核原理与分析》第五周作业

    使用库函数API获取当前时间 #include <stdio.h> #include <time.h> int main() { time_tt tt; struct tm * ...

  10. LeetCode 294. Flip Game II

    原题链接在这里:https://leetcode.com/problems/flip-game-ii/ 题目: You are playing the following Flip Game with ...