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

浏览数：32 / 时间：2015年06月09日

今天给大家介绍一款基于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>