刪除選擇框中的選項，如果它已被選中在其他

Question

我有一個表單。用戶單擊添加按鈕爲該狀態添加另一個狀態+文本框。當人們在第一個框中選擇一個狀態時，我希望它從可能添加的任何其他選擇框中移除，以便它不能再次被選擇。

<form action=state.php method=post> 

<a href="javascript:addElement();" style='color:blue; text-decoration:underline;'>Add a State </a> &nbsp; &nbsp; 
<a href='javascript:removeElement();' style='color:blue; text-decoration:underline;' >Remove </a><br /><br /> 

<script type="text/javascript"> 
    var intTextBox=0; 

    //FUNCTION TO ADD TEXT BOX ELEMENT 
    function addElement() { 
     intTextBox = intTextBox + 1; 
     var contentID = document.getElementById('addresscontent'); 

     var newTBDiv = document.createElement('div'); 

     newTBDiv.setAttribute('id','strText'+intTextBox); 

     newTBDiv.innerHTML = "<select id='u" + intTextBox + "' name=b_state[" + intTextBox + "][statename]/><option value=''>Select a State</option><option value='AK'>AK</option><option value='AL'>AL</option><option value='AR'>AR</option><option value='AS'>AS</option><option value='AZ'>AZ</option><option value='CA'>CA</option></select> &nbsp; <span style='font-size:12px;'>URL (if different) </span><input style='border:1px solid black; ' size=60 type='text' id='u" + intTextBox + "' name=b__state[" +intTextBox + "][url] /><br>"; 

     contentID.appendChild(newTBDiv); 
    } 

    //FUNCTION TO REMOVE TEXT BOX ELEMENT 
    function removeElement() { 
     if(intTextBox != 0) { 
      var contentID = document.getElementById('addresscontent'); 
      contentID.removeChild(document.getElementById('strText'+intTextBox)); 
      intTextBox = intTextBox-1; 
     } 
    } 
</script> 

<div id="addresscontent"></div> 

</div> 

<input type=submit value='go'> 

Answer 1

這裏有你所需要的步驟：

1）收集所有相關選擇場爲節點列表： 的document.getElementById（ 「myBigForm」）的getElementsByTagName（ 「選擇」）。

2）現在您需要遍歷這些選擇字段。對於每個選擇字段，您需要循環選項元素

3）如果選項包含特定值，請執行移除子項。

var removeState = function (x) { 
     "use strict"; 
     var a = document.getElementById("myBigForm").getElementsByTagName("select"), 
      b = a.length, 
      c = 0, 
      d = [], 
      e = 0, 
      f = 0; 
     for (c = 0; c < b; c += 1) { 
      d = a[b].getElementsByTagName("option"); 
      e = d.length; 
      for (f = 0; f < e; f += 1) { 
       if (d[f].value === x) { 
        a[b].removeChild(d[f]); 
        break; 
       } 
      } 
     } 
    };