0

我有一个表格。用户单击添加按钮为该状态添加另一个状态 + 文本框。当人们在第一个框中选择一个状态时，我希望将其从可能添加的任何其他选择框中删除，以便无法再次选择它。

<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'>
4

1 回答 1

0

以下是您需要的步骤：

1）将所有相关的选择字段收集到一个节点列表中：document.getElementById("myBigForm").getElementsByTagName("select");

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;
                }
            }
        }
    };
于 2012-07-19T16:54:46.957 回答