JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 基于jQuery美化联动下拉选择框

基于jQuery美化联动下拉选择框

今天给大家介绍一款基于jQuery美化联动下拉选择框。这款下下拉选择框js里自带了全国所有城市的数数库。下拉选择框适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览

基于jQuery美化联动下拉选择框2015-01-24-jquery-select.rar

实现的代码。

html代码:

  1. <div id="container">
  2.         <div class="inner">
  3.             <section id="main_content">

  4. <h3>Demo</h3>
  5. <div class="m-form">

  6.     <div class="item">
  7.       <label>婚姻状况:</label>
  8.       <dl class="m-select" id="Marriage">
  9.         <dt>未婚</dt>
  10.         <dd>
  11.           <input type="hidden" name="">
  12.         </dd>
  13.       </dl>
  14.     </div>  

  15.     <div class="item">
  16.       <label>年龄:</label>
  17.       <dl class="m-select m-select-w" id="Age0">
  18.         <dt></dt>
  19.         <dd class="age">
  20.           <input type="hidden" name="" value="24">
  21.         </dd>
  22.       </dl>
  23.       <span class="t">至</span>
  24.       <dl class="m-select m-select-w" id="Age1">
  25.         <dt></dt>
  26.         <dd class="age">
  27.           <input type="hidden" name="" value="28">
  28.         </dd>
  29.       </dl>
  30.     </div>

  31.     <div class="item">
  32.       <label>身高:</label>
  33.       <dl class="m-select m-select-w" id="Height0">
  34.         <dt></dt>
  35.         <dd class="height">
  36.           <input type="hidden" name="">
  37.         </dd>
  38.       </dl>
  39.       <span class="t">至</span>
  40.       <dl class="m-select m-select-w" id="Height1">
  41.         <dt></dt>
  42.         <dd class="height">
  43.           <input type="hidden" name="">
  44.         </dd>
  45.       </dl>
  46.     </div>

  47.     <div class="item">
  48.       <label>居住地:</label>
  49.       <dl class="m-select" id="AreaSelector">
  50.         <dt></dt>
  51.         <dd class="region" style="height:210px;">
  52.           <input type="hidden" name="" value="">
  53.           <ul class="tab">
  54.           </ul>
  55.           <div class="tab-con clearfix">
  56.           </div>
  57.         </dd>
  58.       </dl>
  59.     </div>

  60.     <div class="item">
  61.       <label>出生地:</label>
  62.       <dl class="m-select" id="AreaSelector2">
  63.         <dt></dt>
  64.         <dd class="region" style="height:210px;">
  65.           <input type="hidden" name="" value="">
  66.           <ul class="tab">
  67.           </ul>
  68.           <div class="tab-con clearfix">
  69.           </div>
  70.         </dd>
  71.       </dl>
  72.     </div>

  73.     <div class="item">
  74.       <label>月收入:</label>
  75.       <dl class="m-select m-select-w" id="Salary0">
  76.         <dt></dt>
  77.         <dd>
  78.           <input type="hidden" name="">
  79.         </dd>
  80.       </dl>
  81.       <span class="t">至</span>
  82.       <dl class="m-select m-select-w" id="Salary1">
  83.         <dt></dt>
  84.         <dd>
  85.           <input type="hidden" name="">
  86.         </dd>
  87.       </dl>
  88.     </div>   

  89. </div>
  90. <br>
  91. <h3>Code</h3>
  92. <pre>
  93. <code>
  94.      //普通模式
  95.       new SelectorJS.selector.init({
  96.         id:'#Marriage',
  97.         data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ],
  98.         value:'未婚'
  99.       });  

  100.       //年龄联动
  101.       new SelectorJS.age('#Age0','#Age1',25,27);

  102.       //身高联动
  103.       new SelectorJS.heightMulti('#Height0','#Height1',168,178);

  104.       //地区联动 二级
  105.       new SelectorJS.area.init('#AreaSelector','101020600', false);

  106.       //地区联动 三级
  107.       new SelectorJS.area.init('#AreaSelector2','101151202', true);

  108.       //自定义联动
  109.       var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ];
  110.       var salaryDefault1 = '1';
  111.       var salaryDefault2 = '4';
  112.       new SelectorJS.selector.init({
  113.         id:'#Salary0',
  114.         data: salaryCode,
  115.         value:salaryDefault1,
  116.         click: function(val, index){
  117.           new SelectorJS.selector.init({
  118.             id:'#Salary1',
  119.             data: salaryCode.slice(index),
  120.             value:  Math.max(salaryCode[index][0], parseInt(salaryDefault2) )
  121.           }).select.click();
  122.         }
  123.       });
  124.       new SelectorJS.selector.init({
  125.             id:'#Salary1',
  126.             data: salaryCode.slice(parseInt(salaryDefault1)),
  127.             value:  salaryDefault2
  128.       });  
  129. </code>  
  130. </pre>

  131. <h3>说明</h3>
  132. <p>Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件</p>
  133. </section>
  134.             <script>
  135.                 //普通模式
  136.                 new SelectorJS.selector.init({
  137.                     id: '#Marriage',
  138.                     data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"]],
  139.                     value: '1'
  140.                 });

  141.                 //年龄联动
  142.                 new SelectorJS.age('#Age0', '#Age1', 25, 27);

  143.                 //身高联动
  144.                 new SelectorJS.heightMulti('#Height0', '#Height1', 168, 178);

  145.                 //地区联动 二级
  146.                 new SelectorJS.area.init('#AreaSelector', '101020600', false);

  147.                 //地区联动 三级
  148.                 new SelectorJS.area.init('#AreaSelector2', '101151202', true);

  149.                 //自定义联动
  150.                 var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"]];
  151.                 var salaryDefault1 = '1';
  152.                 var salaryDefault2 = '4';
  153.                 new SelectorJS.selector.init({
  154.                     id: '#Salary0',
  155.                     data: salaryCode,
  156.                     value: salaryDefault1,
  157.                     click: function (val, index) {
  158.                         new SelectorJS.selector.init({
  159.                             id: '#Salary1',
  160.                             data: salaryCode.slice(index),
  161.                             value: Math.max(salaryCode[index][0], parseInt(salaryDefault2))
  162.                         }).select.click();
  163.                     }
  164.                 });
  165.                 new SelectorJS.selector.init({
  166.                     id: '#Salary1',
  167.                     data: salaryCode.slice(parseInt(salaryDefault1)),
  168.                     value: salaryDefault2
  169.                 });
  170.             </script>
  171.         </div>
  172.     </div>
复制代码

【基于jQuery美化联动下拉选择框】相关文章

1. 基于jQuery美化联动下拉选择框

2. 更好用的 jQuery 下拉选择框插件

3. 更好用的 jQuery 下拉选择框插件

4. jQuery多级联动美化版Select下拉框

5. jQuery读取json文件,实现省市区/县(国标)三级联动

6. 帮助自定义选择框样式的Javascript - DropKick.js

7. 基于jQuery 的日历控件 xGCalendar

8. 7款基于jquery实现web前端的源码特效

9. 分享10款主流web前端的基于jquery源码预览下载

10. 5款基于jQuery实现的动画的源码

本文来源:https://www.51html5.com/a1489.html

点击展开全部

﹝基于jQuery美化联动下拉选择框﹞相关内容

「基于jQuery美化联动下拉选择框」相关专题

其它栏目

也许您还喜欢