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 ...
随机推荐
-
mac osx install mysql
(1) download mysql dmg (2) install (3) /usr/local/mysql/bin/mysql -u root -p change password
-
使用srvany.exe将任何程序作为Windows服务运行
使用srvany.exe将任何程序作为Windows服务运行 2011 年 3 月 7 日 !本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使 ...
-
PHP世纪万年历
<? //世纪万年历 #这是唯一的设置-请输入php文件的位置 $file="http://192.168.1.168/php/rl/s2m.php"; //#农历每 ...
-
Yii2修改默认布局
public $layout = 'layout';//在类中定义一个变量,名为$layout的php文件 <?php echo $content; ?>
-
Oracle 分页方法研究
1.Oracle 中的三大分页方法 1.1.通过分析函数分页 1.2.通过 ROWNUM 分页 1.3.通过 ROWID 分页 2.Oracle 分页解决方案浅析 2.1.纯后端代码完成分页 2.2. ...
-
C#委托与事件--简单笔记
委托 简单记录点东西 适合似懂非懂的朋友看看 委托类型用来定义和响应应用程序中的回调. 借此可以设计各种有面向对象特性的代码模式.下面要说的事件在我看来就是委托的一种实现,再深一步讲,利用委托加事件, ...
-
mssql sqlserver 获取指定汉字的笔画数的方法分享
转自:http://www.maomao365.com/?p=6421 摘要: 下文讲述计算汉字笔画数的sql函数分享,如下所示: 例:建立汉字笔画数sql函数 )) returns int as b ...
-
05 Django REST Framework 分页
01-分页模式 rest framework中提供了三种分页模式: from rest_framework.pagination import PageNumberPagination, LimitO ...
-
【BZOJ3242】【UOJ#126】【NOI2013】快餐店
NOI都是这种难度的题怎么玩嘛QAQ 原题: 小T打算在城市C开设一家外送快餐店.送餐到某一个地点的时间与外卖店到该地点之间最短路径长度是成正比的,小T希望快餐店的地址选在离最远的顾客距离最近的地方. ...
-
F​l​e​x​4​+​s​p​r​i​n​g​+​h​i​b​e​r​n​a​t​e​+​B​l​a​z​e​D​S​整合案例
http://wenku.baidu.com/link?url=7v5xAyD2nvChQRT60QewpvAASFHMZNvD0OxX11OASYvae8jbVNsr5I000TwwYOlChzq0 ...