如果选择框已在其他框中选中，则从该框中删除选项

Remove options from select box if it is already selected in onother

本文关键字：删除 选项 其他 如果 选择      更新时间：2023-12-05

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

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

以下是您需要的步骤：

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;
                }
            }
        }
    };
相关文章：