JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
效果展示:
代码如下:
<form data-toggle="topjui-form"><div class="topjui-container"><fieldset><legend>调用本地数据</legend></fieldset><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">性别</label><div class="topjui-input-block"><input type="text" name="sex"data-toggle="topjui-combobox"data-options="data:[{value:1,text:'男'},{value:2,text:'女'}]"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">学历(必填)</label><div class="topjui-input-block"><input type="text" name="degree"data-toggle="topjui-combobox"data-options="required:true,valueField:'id',textField:'text',data:[{id:1,text:'大专'},{id:2,text:'本科'},{id:3,text:'研究生'},{id:4,text:'博士生'}]"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">渲染下拉项</label><div class="topjui-input-block"><input type="text" name="degree"data-toggle="topjui-combobox"data-options="required:true,prompt:'使用formatter属性渲染下拉项',valueField:'id',textField:'text',formatter:formatter,data:[{id:2,text:'本科-某大学'},{id:3,text:'研究生-某大学'},{id:4,text:'博士生-某大学'}]"></div></div></div><fieldset><legend>调用远程数据</legend></fieldset><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">籍贯</label><div class="topjui-input-block"><input type="text" name="nativePlace"data-toggle="topjui-combobox"data-options="panelHeight:250,valueField:'id',url:_ctx + '/json/combobox/nativePlace.json'"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">民族(必填)</label><div class="topjui-input-block"><input type="text" name="nation"data-toggle="topjui-combobox"data-options="required:true,prompt:'必填',panelHeight:250,valueField:'id',url:_ctx + '/json/combobox/nation.json'"></div></div></div><fieldset><legend>多级联动下拉框(主动级联,上级触发下级)</legend></fieldset><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">国家</label><div class="topjui-input-block"><input type="text" name="country"data-toggle="topjui-combobox"data-options="panelHeight:250,url:_ctx + '/json/combobox/country.json',valueField: 'id',childCombobox:{id:'province',url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'}"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">省份</label><div class="topjui-input-block"><input type="text" name="province"data-toggle="topjui-combobox"data-options="id:'province',panelHeight:250,valueField: 'id',childCombobox:{id:'city',url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'}"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">城市</label><div class="topjui-input-block"><input type="text" name="city"data-toggle="topjui-combobox"data-options="id:'city',panelHeight:250,valueField: 'id',childCombobox:{id:'district',url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'}"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">区县</label><div class="topjui-input-block"><input type="text" name="district"data-toggle="topjui-combobox"data-options="id:'district',panelHeight:250,valueField: 'id'"></div></div></div><fieldset><legend>多级联动下拉框(被动级联,下级获取上级)</legend></fieldset><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">国家</label><div class="topjui-input-block"><input type="text" name="country2"data-toggle="topjui-combobox"data-options="panelHeight:250,valueField: 'id',url:_ctx + '/json/combobox/country.json'"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">省份</label><div class="topjui-input-block"><input type="text" name="province2"data-toggle="topjui-combobox"data-options="id:'province2',panelHeight:250,valueField: 'id',url:remoteHost+'/system/codeItem/getListByPid?pid={country2}'"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">城市</label><div class="topjui-input-block"><input type="text"name="city2"data-toggle="topjui-combobox"data-options="id:'city2',panelHeight:250,valueField: 'id',url:remoteHost+'/system/codeItem/getListByPid?pid={province2}'"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">区县</label><div class="topjui-input-block"><input type="text"name="district2"data-toggle="topjui-combobox"data-options="id:'district2',panelHeight:250,valueField: 'id',url:remoteHost+'/system/codeItem/getListByPid?pid={city2}'"></div></div></div></div>
</form>
EasyUI中文网:http://www.jeasyui.cn
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com
转载于:https://www.cnblogs.com/xvpindex/p/11066565.html
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)相关推荐
- javascript实现下拉条联动_js实现多级联动下拉框
花了半天时间实现一个多级联动下拉框,目的是对某一植物进行"门纲目科属"的归类.使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的, ...
- Excel制作导入模板,多级联动下拉框(一整列的设置),修改一级下拉框内容,自动清空二级内容
目录 效果展示 一.数据准备 二.模板制作 原因1:为空 原因二:名称管理器数据有误 三.修改一级下拉框内容,自动清空二级内容 1,效果演示 2,实际操作 效果展示 一.数据准备 1,新建一张表,在s ...
- layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
- html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...
- layui多级联动下拉框的实现_layui下拉框实现级联
选择city 北京 上海 广州 深圳 杭州 选择区域 layui.use('form', function () { var form = layui.form; layui.form.on('sel ...
- Android 多级联动下拉框
/** * 获取大类别下拉框数据,并添加到下拉框 / private void get_b_type(){ String sql = "SELECT b_type FROM machine_ ...
- easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效,1.第一种写法:Input框中显示: - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别 以上3种方法均可实 ...
- vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器 实现的动态多级联动下拉选择 基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择 本文demo地址 代码如 ...
- android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
- 2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...
最新文章
- Duanxx的图像处理学习: 透视变换(一)
- phpcms V9 相关阅读/相关文章
- pandas 知识点补充:绘图plot
- 报名 | 东南大学周张泉:基于知识图谱的推理技术
- 【Linux系统编程】线程池
- inbox status and ServiceOrder Status
- OSS.Common获取枚举字典列表标准库支持
- 《Head First 设计模式》第十章-状态模式 状态模式
- js函数、作用域和闭包
- xml文件中““符号报错,无法识别
- GDAL源码剖析(七)之GDAL RasterIO使用说明(续)
- Chromium内核的浏览器Browsers查看Chromium的版本 : navigator.userAgent
- 管理软件开发的最高境界,那就是“无代码开发”
- 教资高中计算机科目,中学信息技术考试科目
- dhtml gantt所有配置_甘特图dhtmlxGantt使用教程:如何快速设置内联编辑器和编辑JavaScript Gantt数据...
- Dan计划:重新定义人生的10000个小时
- Xmanager 5 (Windows 远程Centos工具 )
- 如何使用10个小时搭建出个人域名而又Geek的独立博客?
- Traveler 10上的新能力:支持IMSMO邮件客户机
- 多旋翼无人机仿真 rotors_simulator:roll pitch yawrate thrust 控制器