10顶

使用JQUERY实现json数据三级联动select表单列表特效

稿源：互联网 2018-09-02 22:41:35 点击： 7698 撤稿纠错

经常会用到的三级联动特效代码，JQUERY实现，请注意自行加入JQUERY文件。

以下讨论的是和JQUERY json 数据三级联动 select 列表相关的使用JQUERY实现json数据三级联动select表单列表特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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.alixixi.com/script/jquery-1.8.3.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>

关于使用JQUERY实现json数据三级联动select表单列表特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090295085.shtml方便下次再访问哦。

·上一篇： 跟随鼠标移动的十字星线并显示XY轴坐标特效
·下一篇： 通过按钮选择数字对应的网页文字变红色的特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

使用JQUERY实现json数据三级联动select表单列表特效

文章分类LIST >>返回首页

最新游戏

最新新闻