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
JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）的更多相关文章
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- bootstrap 多级联动下拉框
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- jquery+ligerform三级联动下拉框
如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...
- jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）
1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
随机推荐
- 《程序员代码面试指南》第八章 数组和矩阵问题 数组的partition 调整
题目 数组的partition 调整 java代码 package com.lizhouwei.chapter8; /** * @Description: 数组的partition 调整 * @Aut ...
- 夏日户外风景PSD素材
夏日户外风景PSD素材适用于向日葵素材背景图设计 地址:http://www.huiyi8.com/xiangrikui/
- layer 插件 在子页面关闭自身的方法
先取到该子页面在父级页面中的name 值 var index= parent.layer.getFrameIndex(Window.name); 然后用该方法关闭 parent.layer.clos ...
- Ajax不能接受php return值的原因
PHP在处理ajax返回值的时候,如果使用return如 return $result会失败,echo $result却没问题.解释原因如下: 1.ajax请求从服务器端读取返回值,而且这些返回值必须 ...
- 总结近期CNN模型的发展(一)---- ResNet [1, 2] Wide ResNet [3] ResNeXt [4] DenseNet [5] DPNet [9] NASNet [10] SENet [11] Capsules [12]
总结近期CNN模型的发展(一) from:https://zhuanlan.zhihu.com/p/30746099 余俊 计算机视觉及深度学习 1.前言 好久没有更新专栏了,最近因为项目的原因接 ...
- Chapter2 二分与三分
T1 给一个N个数的序列,分成M段,每段最大值最小 sol:二分最大值,贪心Check T2 平面上n个点,每个点每s会向周围扩散一个单位长度,两个点联通当且仅当扩散有交点,问什么时候这n个点联通 s ...
- C#编译问题'System.Collections.Generic.IEnumerable' does not contain a definition for 'Where' and no extension method 'Where' accepting a first argument
'System.Collections.Generic.IEnumerable<string>' does not contain a definiti ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- ACM之Java技巧
一.Java之ACM注意点 关于四舍五入 小数保留几位: DecimalFormat df = new DecimalFormat("0.00"); String num = d ...
- js避免命名冲突
[1]工程师甲编写功能A var a = 1; var b = 2; alert(a+b); [2]工程师乙添加新功能B var a = 2; var b = 1; alert(a-b); [3]上一 ...