2

クリックするとボタンが表示されます。4つのオプションを使用して選択ボックスを動的に作成しています。最初のオプションは「値の選択」になり、残りは「aaa」、「bbb」、「ccc」になります。必要なのは、選択ボックスでオプションとしてaaaを選択すると、ボタンをクリックすると2番目の選択ボックスが表示されますが、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 に追加するだけです。また、最初の値 (「select」) を非表示にしないようにhideIdを変更しました。

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 に答える