从选择框中删除选项（如果已在其他位置选择）

Question

I have a form. The user clicks the add button to add another state + text box for that state. When people select a state in the first box, I want it removed from any other select box that may be added so it can not be selected again.

<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

Here are the steps you need:

1) Gather all of the relevant select fields into a node list: document.getElementById("myBigForm").getElementsByTagName("select");

2) Now you need to loop through these select fields. For each select field you need to loop through the option elements

3) Perform a remove child if the option contains a certain value.

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;
                }
            }
        }
    };