使用JQUERY实现JSON数据三级联动

来源：互联网发布：网络运营商无服务编辑：程序博客网时间：2024/05/18 03:05
<!DOCTYPE  html><html><head><title>json数据三级联动select</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script></head><body><div>  <label>品牌：</label><select id="sel1"></select>  <label>型号：</label><select id="sel2"></select>  <label>价格：</label><select id="sel3"></select></div><script type="text/javascript">  (function($){    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'}      ]}    ]};    //console.log(data);    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);    });  })(jQuery);</script></body></html>
0 0