js實現(xiàn)二級聯(lián)動，select實現(xiàn)

這是數(shù)據(jù)格式，求助

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: '鴨蛋'
              }]
          }];

回答

編輯回答

心癌

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

2017年11月4日 12:53

編輯回答

墨小羽

<!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){   //相當(dāng)于for循環(huán)，遍歷json，這里s相當(dāng)于一個json[i]
            createop(s,a);        //這個函數(shù)是創(chuàng)建option并添加到select的函數(shù)，第一個參數(shù)是遍歷的json[i],第二個是第一個select。第一個select的創(chuàng)建完成了。
          });
          a.onchange = function(){    //當(dāng)?shù)谝粋€select改變時
            b.innerHTML = '';         //清空第二個select的option   
            json.map(function(s){    //遍歷json
                if(s.id==this.options[this.selectedIndex].id){ //當(dāng)你選中的option的id和json[i]的id相同時，也就是取到你第一個select選擇的json[i].
                    s.child.map(function(x){    //遍歷這個json[i].child,得到每個分類
                        createop(x,b);          //根據(jù)每個分類創(chuàng)建option添加到第二個select上
                    });
                }
            }.bind(this));  //綁定this，改變this指向為a
          }
          function createop(h,parent){
              var op = document.createElement('option');  //創(chuàng)建option
              var op_t = document.createTextNode(h.name);  //創(chuàng)建option的文字
              op.appendChild(op_t);                    //添加文字到option中
              op.id = h.id;                            //option的id賦值
              parent.appendChild(op);                 //把option添加到傳過來的select中
          }
</script>
</body>
</html>

2018年2月14日 17:01