zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    hdu 4002 Find the maximum
    hdu 2837 坑题。
    hdu 3123
    zoj Treasure Hunt IV
    hdu 2053 Switch Game 水题一枚,鉴定完毕
    poj 1430 Binary Stirling Numbers
    hdu 3037 Saving Beans
    hdu 3944 dp?
    南阳oj 求N!的二进制表示最低位的1的位置(从右向左数)。
    fzu 2171 防守阵地 II
  • 原文地址:https://www.cnblogs.com/xvpindex/p/11066565.html
Copyright © 2011-2022 走看看