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

最新推荐文章于 2021-01-27 12:38:45 发布

马道长

最新推荐文章于 2021-01-27 12:38:45 发布

阅读量672

点赞数

分类专栏： javascript jQuery 文章标签： json jquery js

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
使用JQUERY实现JSON数据三级联动

json数据三级联动select 品牌：型号：价格： (function($){ var data = {'car':[ {'brand':'本田','param':[ {'name':'飞度','price':'9w'}, {'name':'锋范','price':'10w'}, {'name'
复制链接

扫一扫