オプションを切り替えるたびに、他のオプションに基づいてオプションのリストをクリアするにはどうすればよいですか？

別のリストで選択したオプションに基づいて1つのリストを更新しようとしていますが、最初のリストのアイテムを変更するたびにその対応するアイテムのオプションが2番目のリストに追加され、私はタイとその逆にインドから切り替えるオプションを切り替えるたびに、他のオプションに基づいてオプションのリストをクリアするにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
<body> 
    <select name = "country" id = "country" onchange = "myFunction()"> 
     <script> 
      var country = new Array("India", "Thailand"); 
      var select = document.getElementById("country"); 
      for(var i = 0;i<country.length;i++) 
      { 
       var option = document.createElement("option"); 
       option.text = option.value = country[i]; 
       select.add(option); 
      } 

      var cities = { 
       "India":["Bangalore","Kolkata","Delhi", "Pune"], 
       "Thailand":["Phuket", "Bangkok"] 
      }; 
      function myFunction(){ 
        if(selectCities!=null)selectCities=null; 
        var listCities=new Array(); 
        var selectedCountry = document.getElementById("country").value; 
        listCities = cities[selectedCountry] 
        var selectCities = document.getElementById("city"); 
        for(var i = 0;i<listCities.length;i++) 
        { 
         var option = document.createElement("option"); 
         option.text = option.value = listCities[i]; 
         selectCities.add(option); 
        } 
      } 
     </script> 
    </select> 
    <p id="test"></p> 
    <select name = "city" id = "city"> 
    </select> 
</body>

私はタイのためにインド、プーケット、バンコクのためにバンガロール、コルカタ、デリー、プネを表示しようとしていますが、それぞれの時間：以下のコードです都市のリストは、オプションが追加されるにつれて増加する。

問題点は何ですか？次に、新しいオプションを追加

selectCities.innerHTML="";

：

出典

2017-07-01 Anirban

removeChildElementsという関数をもう1つ追加します。以下

てみてくださいコード：

<select name = "country" id = "country" onchange = "myFunction()"> 
 
     <script> 
 
      var country = new Array("India", "Thailand"); 
 
      var select = document.getElementById("country"); 
 
      for(var i = 0;i<country.length;i++) 
 
      { 
 
       var option = document.createElement("option"); 
 
       option.text = option.value = country[i]; 
 
       select.add(option); 
 
      } 
 

 
      var cities = { 
 
       "India":["Bangalore","Kolkata","Delhi", "Pune"], 
 
       "Thailand":["Phuket", "Bangkok"] 
 
      }; 
 
      function myFunction(){ 
 
        if(selectCities!=null)selectCities=null; 
 
        var listCities=new Array(); 
 
        var selectedCountry = document.getElementById("country").value; 
 
        listCities = cities[selectedCountry] 
 
        var selectCities = document.getElementById("city"); 
 
// this function would clear all child elements (options) from your selectCities 
 
// You can use it on this way, too: removeChildElements('city'), function will recognize is it "passed" an object or just ID of element 
 
        removeChildElements(selectCities); 
 
        for(var i = 0;i<listCities.length;i++) 
 
        { 
 
         var option = document.createElement("option"); 
 
         option.text = option.value = listCities[i]; 
 
         selectCities.add(option); 
 
        } 
 
      } 
 
     </script> 
 
    </select> 
 
    <p id="test"></p> 
 
    <select name = "city" id = "city"> 
 
    </select> 
 
    
 
    <!-- this function will remove all child elements, in this case will clear your city selection, of parent one --> 
 
    <script> 
 
    \t function removeChildElements(el) { 
 
    \t \t var ele; 
 
    \t \t if (typeof el === 'object') { ele = el; } else { ele = document.getElementById(el); } 
 
    \t \t if (ele != null) { while (ele.firstChild) { ele.removeChild(ele.firstChild); } } 
 
} 
 
    </script>

更新：あなたはinnerHTML=""

を使用することはありません場合は、他のいくつかの html要素 "クリア" のためにその機能を使用することができます

出典

2017-07-01 13:25:14 nelek

はselectCitiesをリセットする場合があります。

出典

2017-07-01 13:22:34

オプションを切り替えるたびに、他のオプションに基づいてオプションのリストをクリアするにはどうすればよいですか？

答えて

関連する問題