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实现！！！）的更多相关文章

  1. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  2. 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  3. 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  4. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  5. bootstrap 多级联动下拉框

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  7. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  8. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  9. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

随机推荐

  1. 用js实现图片（小球）在屏幕上上下左右移动

    <html> <head> <title>Document</title> </head> <body style="bac ...

  2. longtable 跨越多个页面时，如何在跨页时自动断行并加上横线及去掉页眉

    参考: http://users.sdsc.edu/~ssmallen/latex/longtable.html 一般的,在首行后面加上 \endfirsthead\hline\endhead\hli ...

  3. L88

    Where You Vote May Affect How You Vote On election day, where do you vote? If it's in a church, you ...

  4. linux网络编程 ntohs, ntohl, htons,htonl inet_aton等详解

    ntohs =net to host short int 16位 htons=host to net short int 16位 ntohs =net to host long int 32位 hto ...

  5. 如何在asterisk中限制呼叫路数

      在asterisk中,对于呼叫个数是可以通过call-limit进行限制的.限制办法是通过修改asterisk.conf中maxcalls参数,设置允许的最大呼叫数.这里的最大呼叫数是包括所有的呼 ...

  6. AtCoder Grand Contest 013 C：Ants on a Circle

    题目传送门:https://agc013.contest.atcoder.jp/tasks/agc013_c 题目翻译 给你一个周长为\(L\)的圆,有\(N\)只蚂蚁在圆上爬,速度为一单位距离每秒. ...

  7. poj2127——LCIS

    题目:http://poj.org/problem?id=2127 LCIS,注意存储路径的方法. 代码如下: #include<iostream> #include<cstdio& ...

  8. 洛谷P1144——最短路计数

    题目:https://www.luogu.org/problemnew/show/P1144 spfa跑最短路的同时记录cnt数组表示到达方案数. 代码如下: #include<iostream ...

  9. tp框架下，数据库和编辑器都是utf-8, 输出中文却还是乱码

    输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...

  10. java——static声明方法注意事项

    在使用 static 类型声明的方法时需要注意的是:如果在类中声明了一 static类型的属性,则此属性既可以在非 static 类型的方法中使用,也可以在 static类型的方法中使用.但用 sta ...