动态选择框在js中动态添加和删除其选项

Question

我点击了一个按钮，我正在动态创建一个带有4个选项的选择框，第一个选项是“选择值”，其余的是“ aaa”，“ bbb”，“ ccc”，现在我需要的是，当我在选择框中选择aaa作为选项时，现在单击按钮时，我将获得第二个选择框，但是aaa选项不应该存在，并且当我将第一个选择选项从aaa更改为bbb时aaa选项应再次出现在选择框中。 其余与上述相同。 请为此提供解决方案。 任何帮助，将不胜感激。

<button id="addIdButton" style="display:block;" onclick="addId()">clickMe</button>
<div id="place"></div>
<script>
    function addId() {
        var location = document.getElementById("place"); 
        var div = document.createElement("div");
        var span = document.createElement("span");
        var select = document.createElement("select");
        select.setAttribute("id","selectID" );
        select.setAttribute("onchange","hideId(this.value,'selectID','option0','option1')" );
        var option0 = document.createElement("option");
        option0.setAttribute("id","option0" );
        option0.innerHTML="select";
        select.appendChild(option0);
        var option1 = document.createElement("option");
        option1.setAttribute("id","option1" );
        option1.innerHTML="aaaa";
        select.appendChild(option1);
        var option2 = document.createElement("option");
        option2.innerHTML="bbbb";
        select.appendChild(option2);
        var option3 = document.createElement("option");
        option3.innerHTML="cccc";
        select.appendChild(option3);
        span.appendChild(select);
        div.appendChild(span);
        location.appendChild(div);
    }    
</script>

我真的不明白该怎么做并检查所有条件。 以上是创建代码，请提供删除代码帮助。

Answer 1

您可以这样做。 我对addId做了一些修改，并写了hideId

var select_count = 0;

function hideId()
{
    var selectedIndexes = [];
    for(var i=0; i<select_count; i++)
    {
        var select = document.getElementById("select-" + i);

        for(var j=0; j<select.options.length; j++)
        {
            select.options[j].disabled = false;
        }

        for(var j=0; j<selectedIndexes.length; j++)
        {
            var index = selectedIndexes[j];
            select.options[index].disabled = true;

            if(select.selectedIndex == index)
            {
                select.selectedIndex = 0;
            }
        }

        selectedIndexes.push(select.selectedIndex);
    }
}

function addId() {
    var location = document.getElementById("place"); 
    var div = document.createElement("div");
    var span = document.createElement("span");
    var select = document.createElement("select");

    select.setAttribute("id","select-" + select_count );
    select_count++;

    select.setAttribute("onchange","hideId()");
    var option0 = document.createElement("option");
    option0.setAttribute("id","option0" );
    option0.innerHTML="select";
    select.appendChild(option0);
    var option1 = document.createElement("option");
    option1.setAttribute("id","option1" );
    option1.innerHTML="aaaa";
    select.appendChild(option1);
    var option2 = document.createElement("option");
    option2.innerHTML="bbbb";
    select.appendChild(option2);
    var option3 = document.createElement("option");
    option3.innerHTML="cccc";
    select.appendChild(option3);
    span.appendChild(select);
    div.appendChild(span);
    location.appendChild(div);

    if(select_count > 0)
        hideId();
}

更新：

如果需要它与n个元素一起使用，则可以采用这种方式。 要添加更多元素，只需将它们添加到select_values。 另外，我还修改了hideId ，使其不会隐藏第一个值（“ select”）。

var select_count = 0;
var select_values = ["select", "aaa", "bbb", "ccc", "ddd", "eee"];

function hideId()
{
    var selectedIndexes = [];
    for(var i=0; i<select_count; i++)
    {
        var select = document.getElementById("select-" + i);

        for(var j=0; j<select.options.length; j++)
        {
            select.options[j].disabled = false;
        }

        for(var j=0; j<selectedIndexes.length; j++)
        {
            var index = selectedIndexes[j];

            select.options[index].disabled = true;

            if(select.selectedIndex == index)
            {
                select.selectedIndex = 0;
            }
        }

        if(select.selectedIndex != 0)
            selectedIndexes.push(select.selectedIndex);
    }
}

function addOption(select, id, value)
{
    var option1 = document.createElement("option");
    option1.setAttribute("id", id);
    option1.innerHTML = value;
    select.appendChild(option1);
}

function addId()
{
    var location = document.getElementById("place"); 
    var div = document.createElement("div");
    var span = document.createElement("span");
    var select = document.createElement("select");

    select.setAttribute("id","select-" + select_count );
    select_count++;

    select.setAttribute("onchange","hideId()");

    for(var i=0; i<select_values.length; i++)
        addOption(select, "option" + i, select_values[i]);

    span.appendChild(select);
    div.appendChild(span);
    location.appendChild(div);

    if(select_count > 0)
        hideId();
}

更新2：

要以任何顺序工作（不仅是上下颠倒），请使用以下hideId（）版本：

function hideId()
{
    var selectedIndexes = [];

    for(var i=0; i<select_count; i++)
    {
        var select = document.getElementById("select-" + i);

        for(var j=0; j<select.options.length; j++)
        {
            select.options[j].disabled = false;
        }

        if(select.selectedIndex != 0)
            selectedIndexes.push({ index: select.selectedIndex, select: select });
    }

    for(var i=0; i<select_count; i++)
    {
        var select = document.getElementById("select-" + i);

        for(var j=0; j<selectedIndexes.length; j++)
        {
            var selected = selectedIndexes[j];

            if(selected.select != select)
            {
                select.options[selected.index].disabled = true;

                if(select.selectedIndex == selected.index)
                    select.selectedIndex = 0;
            }
        }
    }
}

Answer 2

您无需创建新元素。 您可以显示/隐藏它。 这样，您将具有以下优势：如果客户端的浏览器不支持JavaScript，则该表单将保持可用状态。 尝试这样的事情：

<select id="s1">
    <option>select value</option>
    <option>aaaa</option>
    <option>bbbb</option>
    <option>cccc</option>
    <option>dddd</option>
</select>
<select id="s2">
    <option>select value</option>
    <option>aaaa</option>
    <option>bbbb</option>
    <option>cccc</option>
    <option>dddd</option>
</select>
<button type="button" id="b1">press me</button>
<script>
(function(){
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    s2.style.display = 'none';
    document.getElementById('b1').onclick = function(){
        s2.style.display = '';
    }
    s1.onchange = function(){     
        for(var i = 0; i < s2.options.length;i++)
        {
            s2.options[i].style.display = '';
            if(s1.selectedIndex && (i == s1.selectedIndex))
            {
                s2.options[i].style.display = 'none';
            }
        }
    }
})();
</script>

这是一个例子 。