基于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美化联动下拉选择框的相关教程结束。