dynamic select box adding and removing its options dynamically in js

Question

I have a button on click of it, I'am crating a select box dynamically with 4 options, the first option will be "select value" the rest are "aaa","bbb","ccc" now what I need is, when I select aaa as an option in the select box, and now when I click on the button I will get the second select box, but the aaa option shouldn't be there, and when I change the first select option from aaa to bbb the aaa option should appear again in the select box. and the rest is same as the above. Kindly provide a solution for this . Any help would be appreciated.

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

I really don't understand how to do it and check for all the conditions. Above is the creation code, please help with the deletion code.

Answer 1

You can do it like this. I 've made some modifications on addId and wrote 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();
}

UPDATE:

If you need it to work with n elements, you can do it this way. To add more elements, just add them to select_values. Also, I've modified hideId so it doesn't hide the first value ("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();
}

UPDATE 2:

To work in any order (not just from upside-down), use this hideId() version:

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

You don't need to create new element. You can just show/hide it. This way you'll have the advantage that if the client's browser does not support JavaScript the form will remain usable. Try something like that:

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

Here's an example.