既存のラベル要素にサブ要素を追加します.

	
		—   —
		   
		   
		   
	
	
	
  
	//  “ ” “  ”       
	var cities=[
      [{"name":'   ',"value":101},
       {"name":'   ',"value":102},
       {"name":'   ',"value":103},
       {"name":'   ',"value":104}],
      [{"name":'   ',"value":201},
       {"name":'   ',"value":202},
       {"name":'   ',"value":203}],
      [{"name":'    ',"value":301},
       {"name":'   ',"value":302},
       {"name":'   ',"value":303},
       {"name":'   ',"value":304},
       {"name":'    ',"value":305}]
	];
//  

1.元の要素を置き換える
document.creat Element(ラベル名)を使用します.親ラベルと同じ種類のラベル使用要素を作成します.
親要素を使用します.parent Node.replacceChilde(代替の要素、親要素)

  //        
  let select_provs=document.querySelector("select[name=provs]");
  //        
  select_provs.onchange=function(event){
  //        
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //           
    let index=parseInt(select_provs.selectedIndex);
    //            
    if(index>0){
      //      
      let parent=document.createElement("select");
      parent.name="cities";
      //     
      parent.appendChild(new Option("—   —"));
      //      ,     
      //      ,              
      for(let key of cities[index-1]){
      //     
        parent.appendChild(new Option(key.name,key.value));
      }
      //          
      select_city.parentNode.replaceChild(parent,select_city);
    }else{
      //             ,       
      select_city.className="hide";
    }
  }

2.ドキュメントのセグメントを使う
document.create DocktFragment()を使用します.サブ要素のステップと同じで、直接的な親要素.サブ要素を直接追加できます.

  //        
  let select_provs=document.querySelector("select[name=provs]");
  //        
  select_provs.onchange=function(event){
  //        
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //           
    let index=parseInt(select_provs.selectedIndex);
    //            
    if(index>0){
      //     
       parent.appendChild(new Option("—   —"));
      //      ,     
      //      ,              
      for(let key of cities[index-1]){
        //     
        parent.appendChild(new Option(key.name,key.value));
      }
      //       
      select_city.innerHTML="";
      //      
      select_city.appendChild(parent);
      //           
      select_city.className="";
    }else{
      //             ,       
      select_city.className="hide";
    }
  }

3.innerHTMLを使用する
まずサブ要素をテンプレート文字列でスティッチングしてから親要素を使用します.innersHTML=テンプレート文字列です.親要素にサブ要素を追加できます.

  //        
  let select_provs=document.querySelector("select[name=provs]");
  //        
  select_provs.onchange=function(event){
  //        
  let select_city=document.querySelector("select[name=cities]");
    let select_provs=this;
    //           
    let index=parseInt(select_provs.selectedIndex);
    //            
    if(index>0){
      //     ,       
      select_city.innerHTML=`—   —`;
      //      ,     
      //      ,              
      for(let key of cities[index-1]){
        select_city.innerHTML+=`${key.name}`;
      }
      //           
      select_city.className="";
    }else{
      //             ,       
      select_city.className="hide";
    }
  }

1.利点は、親要素のすべての属性とinnerHTMLをリセットする場合に便利である.1.欠点のあるダイナミックスは、親要素要素の属性の増加ごとに1つの文が必要である.
サブ要素を追加した後、親要素の属性とinnerHTMLリセットのラベルを試してみます.
2.利点は、親要素を何度も捕獲する必要はありません.2.欠点のある要素の属性ごとに増加するには、ステートメントが必要です.
サブ要素を追加した後、親要素はリセットされるラベルを必要としません.
3.メリットテンプレート文字列は直接綴り、サブ要素属性は直接書きます.現在のページで効果を実現し、テンプレートにコピーして、データを試してみます.リセットが必要な時に使用します.必要でない時に+=を使います.