首页 > 代码库 > 基于jQuery美化联动下拉选择框
基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框。这款下下拉选择框js里自带了全国所有城市的数数库。下拉选择框适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div id="container"> <div class="inner"> <section id="main_content"><h3>Demo</h3><div class="m-form"> <div class="item"> <label>婚姻状况：</label> <dl class="m-select" id="Marriage"> <dt>未婚</dt> <dd> <input type="hidden" name=""> </dd> </dl> </div> <div class="item"> <label>年龄：</label> <dl class="m-select m-select-w" id="Age0"> <dt></dt> <dd class="age"> <input type="hidden" name="" value="24"> </dd> </dl> <span class="t">至</span> <dl class="m-select m-select-w" id="Age1"> <dt></dt> <dd class="age"> <input type="hidden" name="" value="28"> </dd> </dl> </div> <div class="item"> <label>身高：</label> <dl class="m-select m-select-w" id="Height0"> <dt></dt> <dd class="height"> <input type="hidden" name=""> </dd> </dl> <span class="t">至</span> <dl class="m-select m-select-w" id="Height1"> <dt></dt> <dd class="height"> <input type="hidden" name=""> </dd> </dl> </div> <div class="item"> <label>居住地:</label> <dl class="m-select" id="AreaSelector"> <dt></dt> <dd class="region" style="height:210px;"> <input type="hidden" name="" value=""> <ul class="tab"> </ul> <div class="tab-con clearfix"> </div> </dd> </dl> </div> <div class="item"> <label>出生地:</label> <dl class="m-select" id="AreaSelector2"> <dt></dt> <dd class="region" style="height:210px;"> <input type="hidden" name="" value=""> <ul class="tab"> </ul> <div class="tab-con clearfix"> </div> </dd> </dl> </div> <div class="item"> <label>月收入:</label> <dl class="m-select m-select-w" id="Salary0"> <dt></dt> <dd> <input type="hidden" name=""> </dd> </dl> <span class="t">至</span> <dl class="m-select m-select-w" id="Salary1"> <dt></dt> <dd> <input type="hidden" name=""> </dd> </dl> </div> </div><br><h3>Code</h3><pre><code> //普通模式 new SelectorJS.selector.init({ id:‘#Marriage‘, data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ], value:‘未婚‘ }); //年龄联动 new SelectorJS.age(‘#Age0‘,‘#Age1‘,25,27); //身高联动 new SelectorJS.heightMulti(‘#Height0‘,‘#Height1‘,168,178); //地区联动 二级 new SelectorJS.area.init(‘#AreaSelector‘,‘101020600‘, false); //地区联动 三级 new SelectorJS.area.init(‘#AreaSelector2‘,‘101151202‘, true); //自定义联动 var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ]; var salaryDefault1 = ‘1‘; var salaryDefault2 = ‘4‘; new SelectorJS.selector.init({ id:‘#Salary0‘, data: salaryCode, value:salaryDefault1, click: function(val, index){ new SelectorJS.selector.init({ id:‘#Salary1‘, data: salaryCode.slice(index), value: Math.max(salaryCode[index][0], parseInt(salaryDefault2) ) }).select.click(); } }); new SelectorJS.selector.init({ id:‘#Salary1‘, data: salaryCode.slice(parseInt(salaryDefault1)), value: salaryDefault2 }); </code> </pre><h3>说明</h3><p>Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件</p></section> <script> //普通模式 new SelectorJS.selector.init({ id: ‘#Marriage‘, data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"]], value: ‘1‘ }); //年龄联动 new SelectorJS.age(‘#Age0‘, ‘#Age1‘, 25, 27); //身高联动 new SelectorJS.heightMulti(‘#Height0‘, ‘#Height1‘, 168, 178); //地区联动 二级 new SelectorJS.area.init(‘#AreaSelector‘, ‘101020600‘, false); //地区联动 三级 new SelectorJS.area.init(‘#AreaSelector2‘, ‘101151202‘, true); //自定义联动 var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"]]; var salaryDefault1 = ‘1‘; var salaryDefault2 = ‘4‘; new SelectorJS.selector.init({ id: ‘#Salary0‘, data: salaryCode, value: salaryDefault1, click: function (val, index) { new SelectorJS.selector.init({ id: ‘#Salary1‘, data: salaryCode.slice(index), value: Math.max(salaryCode[index][0], parseInt(salaryDefault2)) }).select.click(); } }); new SelectorJS.selector.init({ id: ‘#Salary1‘, data: salaryCode.slice(parseInt(salaryDefault1)), value: salaryDefault2 }); </script> </div> </div>
via：http://www.w2bc.com/Article/18539
基于jQuery美化联动下拉选择框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。