動態選擇框在js中動態添加和刪除其選項

Question

我有一個按鈕點擊它，我用4個選項動態選擇框，第一個選項將是「選擇值」，其餘的是「aaa」 ，「bbb」，「ccc」現在我需要的是，當我在選擇框中選擇aaa作爲選項時，現在當我點擊按鈕時，我會得到第二個選擇框，但aaa選項不應該是那裏，當我將第一個選擇選項從aaa更改爲bbb時，aaa選項應該再次出現在選擇框中。其餘與上述相同。請爲此提供解決方案。任何幫助，將不勝感激。

<button id="addIdButton" style="display:block;" onclick="addId()">clickMe</button> 
<div id="place"></div> 
<script> 
    function addId() { 
     var location = document.getElementById("place"); 
     var div = document.createElement("div"); 
     var span = document.createElement("span"); 
     var select = document.createElement("select"); 
     select.setAttribute("id","selectID"); 
     select.setAttribute("onchange","hideId(this.value,'selectID','option0','option1')"); 
     var option0 = document.createElement("option"); 
     option0.setAttribute("id","option0"); 
     option0.innerHTML="select"; 
     select.appendChild(option0); 
     var option1 = document.createElement("option"); 
     option1.setAttribute("id","option1"); 
     option1.innerHTML="aaaa"; 
     select.appendChild(option1); 
     var option2 = document.createElement("option"); 
     option2.innerHTML="bbbb"; 
     select.appendChild(option2); 
     var option3 = document.createElement("option"); 
     option3.innerHTML="cccc"; 
     select.appendChild(option3); 
     span.appendChild(select); 
     div.appendChild(span); 
     location.appendChild(div); 
    }  
</script> 

我真的不明白該怎麼做，並檢查所有的條件。以上是創建代碼，請幫助刪除代碼。

Answer 1

您不需要創建新元素。你可以顯示/隱藏它。通過這種方式，您將擁有如果客戶端的瀏覽器不支持JavaScript，則表單仍然可用。試試這樣的：

<select id="s1"> 
    <option>select value</option> 
    <option>aaaa</option> 
    <option>bbbb</option> 
    <option>cccc</option> 
    <option>dddd</option> 
</select> 
<select id="s2"> 
    <option>select value</option> 
    <option>aaaa</option> 
    <option>bbbb</option> 
    <option>cccc</option> 
    <option>dddd</option> 
</select> 
<button type="button" id="b1">press me</button> 
<script> 
(function(){ 
    var s1 = document.getElementById('s1'); 
    var s2 = document.getElementById('s2'); 
    s2.style.display = 'none'; 
    document.getElementById('b1').onclick = function(){ 
     s2.style.display = ''; 
    } 
    s1.onchange = function(){  
     for(var i = 0; i < s2.options.length;i++) 
     { 
      s2.options[i].style.display = ''; 
      if(s1.selectedIndex && (i == s1.selectedIndex)) 
      { 
       s2.options[i].style.display = 'none'; 
      } 
     } 
    } 
})(); 
</script> 

這是example。

Answer 2

你可以這樣做。我已經做了一些修改上ADDID和寫hideId

var select_count = 0; 

function hideId() 
{ 
    var selectedIndexes = []; 
    for(var i=0; i<select_count; i++) 
    { 
     var select = document.getElementById("select-" + i); 

     for(var j=0; j<select.options.length; j++) 
     { 
      select.options[j].disabled = false; 
     } 

     for(var j=0; j<selectedIndexes.length; j++) 
     { 
      var index = selectedIndexes[j]; 
      select.options[index].disabled = true; 

      if(select.selectedIndex == index) 
      { 
       select.selectedIndex = 0; 
      } 
     } 

     selectedIndexes.push(select.selectedIndex); 
    } 
} 

function addId() { 
    var location = document.getElementById("place"); 
    var div = document.createElement("div"); 
    var span = document.createElement("span"); 
    var select = document.createElement("select"); 

    select.setAttribute("id","select-" + select_count); 
    select_count++; 

    select.setAttribute("onchange","hideId()"); 
    var option0 = document.createElement("option"); 
    option0.setAttribute("id","option0"); 
    option0.innerHTML="select"; 
    select.appendChild(option0); 
    var option1 = document.createElement("option"); 
    option1.setAttribute("id","option1"); 
    option1.innerHTML="aaaa"; 
    select.appendChild(option1); 
    var option2 = document.createElement("option"); 
    option2.innerHTML="bbbb"; 
    select.appendChild(option2); 
    var option3 = document.createElement("option"); 
    option3.innerHTML="cccc"; 
    select.appendChild(option3); 
    span.appendChild(select); 
    div.appendChild(span); 
    location.appendChild(div); 

    if(select_count > 0) 
     hideId(); 
} 

UPDATE：

如果你需要它與n個元素的工作，你能做到這樣。 要添加更多元素，只需將它們添加到select_values。 此外，我已修改hideId因此它不會隱藏第一個值（「選擇」）。

var select_count = 0; 
var select_values = ["select", "aaa", "bbb", "ccc", "ddd", "eee"]; 

function hideId() 
{ 
    var selectedIndexes = []; 
    for(var i=0; i<select_count; i++) 
    { 
     var select = document.getElementById("select-" + i); 

     for(var j=0; j<select.options.length; j++) 
     { 
      select.options[j].disabled = false; 
     } 

     for(var j=0; j<selectedIndexes.length; j++) 
     { 
      var index = selectedIndexes[j]; 

      select.options[index].disabled = true; 

      if(select.selectedIndex == index) 
      { 
       select.selectedIndex = 0; 
      } 
     } 

     if(select.selectedIndex != 0) 
      selectedIndexes.push(select.selectedIndex); 
    } 
} 

function addOption(select, id, value) 
{ 
    var option1 = document.createElement("option"); 
    option1.setAttribute("id", id); 
    option1.innerHTML = value; 
    select.appendChild(option1); 
} 

function addId() 
{ 
    var location = document.getElementById("place"); 
    var div = document.createElement("div"); 
    var span = document.createElement("span"); 
    var select = document.createElement("select"); 

    select.setAttribute("id","select-" + select_count); 
    select_count++; 

    select.setAttribute("onchange","hideId()"); 

    for(var i=0; i<select_values.length; i++) 
     addOption(select, "option" + i, select_values[i]); 

    span.appendChild(select); 
    div.appendChild(span); 
    location.appendChild(div); 

    if(select_count > 0) 
     hideId(); 
} 

更新2：

以任何順序工作（不只是從倒置），使用此hideId（）版本：

function hideId() 
{ 
    var selectedIndexes = []; 

    for(var i=0; i<select_count; i++) 
    { 
     var select = document.getElementById("select-" + i); 

     for(var j=0; j<select.options.length; j++) 
     { 
      select.options[j].disabled = false; 
     } 

     if(select.selectedIndex != 0) 
      selectedIndexes.push({ index: select.selectedIndex, select: select }); 
    } 

    for(var i=0; i<select_count; i++) 
    { 
     var select = document.getElementById("select-" + i); 

     for(var j=0; j<selectedIndexes.length; j++) 
     { 
      var selected = selectedIndexes[j]; 

      if(selected.select != select) 
      { 
       select.options[selected.index].disabled = true; 

       if(select.selectedIndex == selected.index) 
        select.selectedIndex = 0; 
      } 
     } 
    } 
}