선택 상자가 이미 선택되어있는 경우 선택 상자에서 제거합니다.

Question

양식이 있습니다. 사용자는 추가 버튼을 클릭하여 해당 상태에 대한 다른 상태 + 텍스트 상자를 추가합니다. 사용자가 첫 번째 상자에서 상태를 선택하면 추가 할 수있는 다른 선택 상자에서 해당 상태를 제거하여 다시 선택할 수 없도록합니다.

1) 노드 목록에 관련 선택 모든 필드를 수집 :

<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

여기 당신이 필요로하는 단계입니다 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; 
       } 
      } 
     } 
    };