1. 首頁
  2. 問答
  3. Javascript選擇選項應用程序

Javascript選擇選項應用程序

2017-04-02 90 views
0

我正在嘗試僅使用Javascipt創建選擇應用程序。我知道互聯網Javascript選擇選項應用程序

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2" ></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 
     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 


     for (var i = 0; i < optionArray.length; i++) { 
     var store = optionArray[i]; 
     var createNewEl = document.createElement('option'); 
     createNewEl.innerHTML = store; 
     s2.appendChild(createNewEl); 
     } 

    }  

</script> 
</html>

這是一個完整的代碼我現在用它來寫這篇apllication這個代碼，但我每次我選擇汽車品牌的選擇**當我選擇另一個選項fromcar做**，它不會從汽車模型刪除之前的選項和列表得到提高等等，每次我選擇汽車選項使

來源

2017-04-02 Aseem Sharma

回答

2

杉木st，你需要導入jQuery。 <head>標籤之間粘貼此：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你的腳本追加新值結束的選擇列表中，因此它必須刪除所有老值。

$("#slct2 option").remove();

我測試了它，對我來說工作正常。這是完整的工作代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2"></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 

     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2);   

     $("#slct2 option").remove(); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 

     for (var i = 0; i < optionArray.length; i++) { 
      var store = optionArray[i]; 
      var createNewEl = document.createElement('option'); 
      createNewEl.innerHTML = store; 
      s2.appendChild(createNewEl); 
     } 
    }  

</script> 
</html>

編輯： 如果你不想使用jQuery只需更換這$("#slct2 option").remove();本：

while (s2.firstChild) { 
    s2.removeChild(s2.firstChild); 
}

來源

2017-04-02 13:38:44 szymon

+0

謝謝 它的工作，但除了你提供的其他兩個方法之外，還有更多的方法，因爲現在寫我在我學習Javascript的初步階段，我想我部分理解了while語句。如果有**語句或其他的東西，我們可以使用like **嗎？ –

相關問題

 相關問題