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
作者:小策一喋
邮箱:xvpindex#qq.com
出处:http://www.cnblogs.com/xvpindex/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如果觉得本文对您有益,欢迎点赞、欢迎探讨。本博客来源于互联网的资源,若侵犯到您的权利,请联系博主予以删除。