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中文网：
TopJUI前端框架：
TopJUI交流社区：
