基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框。这款下下拉选择框js里自带了全国所有城市的数数库。下拉选择框适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
在线预览
基于jQuery美化联动下拉选择框2015-01-24-jquery-select.rar
实现的代码。
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>
【基于jQuery美化联动下拉选择框】相关文章
5. jQuery读取json文件,实现省市区/县(国标)三级联动
6. 帮助自定义选择框样式的Javascript - DropKick.js
9. 分享10款主流web前端的基于jquery源码预览下载
本文来源:https://www.51html5.com/a1489.html
﹝基于jQuery美化联动下拉选择框﹞相关内容
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的头像恶搞特效
- 10个web前端基于jQuery动画插件及源码
- 8个基于jQuery和HTML5的日历时钟插件
- 一款基于jQuery的图片场景标注提示弹窗特效
- 一款基于jQuery底部带缩略图的焦点图
- 一款基于jQuery的图片左右滑动焦点图
- 基于jQuery的图片相册滑出放大插件
- 基于jQuery的网站首页宽屏焦点图幻灯片
- 一款基于jQuery的图片分组切换焦点图插件