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>

这是一个example。

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

2 个答案: