使用jquery实现select下拉框三级联动

三级联动在选择地区的时候很常见，那么就来一步步三级联动的实现。

先附上html代码，

<div>
  <label>品牌：</label><select id="sel1"></select>
  <label>型号：</label><select id="sel2"></select>
  <label>价格：</label><select id="sel3"></select>
</div>

第一步，定义json数组

  var data = {'car':[
      {'brand':'本田','param':[
        {'name':'飞度','price':'9w'},
        {'name':'锋范','price':'10w'},
        {'name':'思域','price':'14w'},
        {'name':'xx','price':'15w'}
      ]},
      {'brand':'宝马','param':[
        {'name':'3x','price':'49w'},
        {'name':'5x','price':'70w'},
        {'name':'7x','price':'214w'}
      ]},
      {'brand':'奔驰','param':[
        {'name':'C级','price':'28w'},
        {'name':'E级','price':'40w'}
      ]}
    ]};

第二步，构造select下拉选项并进行联动

    var $sel1 = $('#sel1');
    var $sel2 = $('#sel2');
    var $sel3 = $('#sel3');

    function select_1(n){//构造第一个select
      var n = n || 0;
      var html = '';
      var len = data.car.length;
      for(var i = 0; i < len; i++){
        if(i == n){
          html += '<option value="' + data.car[i].brand + '" selected="selected">' + data.car[i].brand + '</option>';
        }else{
          html += '<option value="' + data.car[i].brand + '">' + data.car[i].brand + '</option>';
        }
      }
      $sel1.html(html);
      select_2(n);
    }

    function select_2(n,q){//构造第二个select
      var n = n || 0;
      var q = q || 0;
      var html = '';
      var len = data.car[n].param.length;
      for(var i = 0; i < len; i++){
        if(i == q){
          html += '<option value="' + data.car[n].param[i].name + '" selected="selected">' + data.car[n].param[i].name + '</option>';
        }else{
          html += '<option value="' + data.car[n].param[i].name + '" >' + data.car[n].param[i].name + '</option>';
        }
      }
      $sel2.html(html);
      select_3(n,q);
    }

    function select_3(n,q){//构造第三个select
      var n = n || 0;
      var q = q || 0;
      var html = '';
      html += '<option value="' + data.car[n].param[q].price + '" >' + data.car[n].param[q].price + '</option>';
      $sel3.html(html);
    }

    select_1();//初始化

    $sel1.change(function(){//绑定第一个select
      var n = $sel1.find(':selected').index();
      select_1(n);
    });

    $sel2.change(function(){//绑定第二个select
      var n = $sel1.find(':selected').index();
      var q = $sel2.find(':selected').index();
      select_3(n,q);
    });