js实现二级联动，select实现

这是数据格式，求助

var json = [{

              id: 1,
              name: '蔬菜',
              child: [{
                  id: '1',
                  name: '白菜'
              }, {
                  id: '2',
                  name: '萝卜'
              }, {
                  id: '3',
                  name: '菠菜'
              }]
          }, {
              id: 2,
              name: '肉类',
              child: [{
                  id: '1',
                  name: '猪肉'
              }, {
                  id: '2',
                  name: '羊肉'
              }, {
                  id: '3',
                  name: '牛肉'
              }]
          }, {
              id: 3,
              name: '蛋类',
              child: [{
                  id: '1',
                  name: '鸡蛋'
              }, {
                  id: '2',
                  name: '鹅蛋'
              }, {
                  id: '3',
                  name: '鸭蛋'
              }]
          }];

html5 javascript

阅读 4.6k

2 个回答

陌路凡歌

✓ 已被采纳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <select  id="a"></select>
    <select id="b">
        <option value="">请选择</option>
    </select>
<script>
    var json = [{

              id: 1,
              name: '蔬菜',
              child: [{
                  id: '1',
                  name: '白菜'
              }, {
                  id: '2',
                  name: '萝卜'
              }, {
                  id: '3',
                  name: '菠菜'
              }]
          }, {
              id: 2,
              name: '肉类',
              child: [{
                  id: '1',
                  name: '猪肉'
              }, {
                  id: '2',
                  name: '羊肉'
              }, {
                  id: '3',
                  name: '牛肉'
              }]
          }, {
              id: 3,
              name: '蛋类',
              child: [{
                  id: '1',
                  name: '鸡蛋'
              }, {
                  id: '2',
                  name: '鹅蛋'
              }, {
                  id: '3',
                  name: '鸭蛋'
              }]
          }];
           var a = document.getElementById('a');
          var b = document.getElementById('b');
          json.map(function(s){   //相当于for循环，遍历json，这里s相当于一个json[i]
            createop(s,a);        //这个函数是创建option并添加到select的函数，第一个参数是遍历的json[i],第二个是第一个select。第一个select的创建完成了。
          });
          a.onchange = function(){    //当第一个select改变时
            b.innerHTML = '';         //清空第二个select的option   
            json.map(function(s){    //遍历json
                if(s.id==this.options[this.selectedIndex].id){ //当你选中的option的id和json[i]的id相同时，也就是取到你第一个select选择的json[i].
                    s.child.map(function(x){    //遍历这个json[i].child,得到每个分类
                        createop(x,b);          //根据每个分类创建option添加到第二个select上
                    });
                }
            }.bind(this));  //绑定this，改变this指向为a
          }
          function createop(h,parent){
              var op = document.createElement('option');  //创建option
              var op_t = document.createTextNode(h.name);  //创建option的文字
              op.appendChild(op_t);                    //添加文字到option中
              op.id = h.id;                            //option的id赋值
              parent.appendChild(op);                 //把option添加到传过来的select中
          }
</script>
</body>
</html>

康师傅爱你呦

17724

发布于
2017-11-08

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    <script type="text/javascript">
        var json = [{
              id: 1,
              name: '蔬菜',
              child: [{
                  id: '1',
                  name: '白菜'
              }, {
                  id: '2',
                  name: '萝卜'
              }, {
                  id: '3',
                  name: '菠菜'
              }]
          }, {
              id: 2,
              name: '肉类',
              child: [{
                  id: '1',
                  name: '猪肉'
              }, {
                  id: '2',
                  name: '羊肉'
              }, {
                  id: '3',
                  name: '牛肉'
              }]
          }, {
              id: 3,
              name: '蛋类',
              child: [{
                  id: '1',
                  name: '鸡蛋'
              }, {
                  id: '2',
                  name: '鹅蛋'
              }, {
                  id: '3',
                  name: '鸭蛋'
              }]
          }];
    window.onload=function(){
            for(var i = 0;i<json.length;i++){
                var obj = json[i];
                var objId =obj.id;
                var objname=obj.name;
                
                var optEle = document.createElement("option");
                optEle.innerText =objname;
                optEle.value=objId;
                
                document.getElementById("sel1").appendChild(optEle)
            }
            document.getElementById("sel1").onchange=function(){
                for(var i=0;i<json.length;i++){
                  if(this.value == "default"){
                      var secondSelectEle = document.getElementById("second_select");
                      if(secondSelectEle!=null){
                          document.getElementById("container").removeChild(secondSelectEle);
                      }    
                  }
                if(json[i].id==this.value){
                    var childArr = json[i].child;
                    var secondSle =document.createElement("select");
                    secondSle.id = "second_select";
                        
                    for(var k =0; k<childArr.length;k++){
                        var chilId=childArr[k].id;
                        var chilName=childArr[k].name;
                        
                        var chilOptEle = document.createElement("option");
                        chilOptEle.innerText=chilName;
                        chilOptEle.value=chilId;
                        
                        secondSle.appendChild(chilOptEle);    
                        }
                        
                    var secondSelectEle=document.getElementById("second_select");
                        if(secondSelectEle!=null){
                            document.getElementById("container").removeChild(secondSelectEle);
                        }
                        document.getElementById("container").append(secondSle);
                              break;
                    }
                }
            }
        
    }
    
    </script>
</head>
<body>
    <div id="container">
    <span>类别:</span>
    <select name="select1" id="sel1">
        <option value="default" id="selection1" selected="selected">----请选择-----</option>
    </select>
</div>
</body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

js实现二级联动，select实现

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

js 如何将Key属性相同的放在同一个数组？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

H5 可以实现点击按钮保存图片到相册功能吗？

前端页面脚本更新时，如何让用户端，使用最新脚本？