2

我有一个点击按钮，我正在用 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>

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

4

2 回答 2

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;
            }
        }
    }
}
于 2012-10-16T07:57:06.210 回答
0

您不需要创建新元素。您可以显示/隐藏它。这样，您将有一个优势，即如果客户端的浏览器不支持 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>

这是一个例子。

于 2012-10-16T07:51:28.710 回答