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实现!!!)相关推荐

  1. javascript实现下拉条联动_js实现多级联动下拉框

    花了半天时间实现一个多级联动下拉框,目的是对某一植物进行"门纲目科属"的归类.使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的, ...

  2. Excel制作导入模板,多级联动下拉框(一整列的设置),修改一级下拉框内容,自动清空二级内容

    目录 效果展示 一.数据准备 二.模板制作 原因1:为空 原因二:名称管理器数据有误 三.修改一级下拉框内容,自动清空二级内容 1,效果演示 2,实际操作 效果展示 一.数据准备 1,新建一张表,在s ...

  3. layui多级联动下拉框的实现_简单三级联动的实现

    当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...

  4. html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单

    本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...

  5. layui多级联动下拉框的实现_layui下拉框实现级联

    选择city 北京 上海 广州 深圳 杭州 选择区域 layui.use('form', function () { var form = layui.form; layui.form.on('sel ...

  6. Android 多级联动下拉框

    /** * 获取大类别下拉框数据,并添加到下拉框 / private void get_b_type(){ String sql = "SELECT b_type FROM machine_ ...

  7. easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效,1.第一种写法:Input框中显示: - phpStudy...

    jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别 以上3种方法均可实 ...

  8. vue基于element-ui的Select选择器实现的动态多级联动下拉选择

    本文讲的是 vue基于 element-ui 的 Select选择器 实现的动态多级联动下拉选择 基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择 本文demo地址 代码如 ...

  9. android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...

    日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...

  10. 2018最新版省市区三级联动下拉框+所有源代码以及数据库

    2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...

最新文章

  1. Duanxx的图像处理学习: 透视变换(一)
  2. phpcms V9 相关阅读/相关文章
  3. pandas 知识点补充:绘图plot
  4. 报名 | 东南大学周张泉:基于知识图谱的推理技术
  5. 【Linux系统编程】线程池
  6. inbox status and ServiceOrder Status
  7. OSS.Common获取枚举字典列表标准库支持
  8. 《Head First 设计模式》第十章-状态模式 状态模式
  9. js函数、作用域和闭包
  10. xml文件中““符号报错,无法识别
  11. GDAL源码剖析(七)之GDAL RasterIO使用说明(续)
  12. Chromium内核的浏览器Browsers查看Chromium的版本 : navigator.userAgent
  13. 管理软件开发的最高境界,那就是“无代码开发”
  14. 教资高中计算机科目,中学信息技术考试科目
  15. dhtml gantt所有配置_甘特图dhtmlxGantt使用教程:如何快速设置内联编辑器和编辑JavaScript Gantt数据...
  16. Dan计划:重新定义人生的10000个小时
  17. Xmanager 5 (Windows 远程Centos工具 )
  18. 如何使用10个小时搭建出个人域名而又Geek的独立博客?
  19. Traveler 10上的新能力:支持IMSMO邮件客户机
  20. 多旋翼无人机仿真 rotors_simulator:roll pitch yawrate thrust 控制器

热门文章

  1. 汇编Dos下16位输入输出io.inc
  2. GPS卫星定位基本原理
  3. UE4 视频播放打包Pak内
  4. Java开发环境搭建实验报告
  5. 【历史上的今天】3 月 9 日:AlphaGo 成名之战;Mac 电脑设计者诞生;谷歌收购 Writely
  6. Windows Bat脚本实现定时重启应用程序
  7. 美食网页设计作品html,美食网页设计与制作.doc
  8. HTML CSS基础
  9. nodejs项目实例医生预约平台宠物医院预约挂号网
  10. VMware Workstation 16.1 macOS unlocker 3.0.3