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.

If i understand right, you need any select to contain all the options except the selected in the previous selects? — Pato
– Pato, Commented Oct 16, 2012 at 7:28
"and when I change the first select option from aaa to bbb the aaa option should appear again in the select box" and instead "bbb" should disappear from the second selectbox? — ted
– ted, Commented Oct 16, 2012 at 7:33
And if you select "ccc" form the second select, then "ccc" should disappear from the first one? — Pato
– Pato, Commented Oct 16, 2012 at 7:51

Pato · Accepted Answer · 2012-10-16 10:19:43Z

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

i have huge lines of code in which this a small little change i need to do now, what u have sent works fine if i am coming from top to bottom, it is disabling the selected options from top, but it doesn't work in reverse order nor in cross order, any idea on that?
Yes, because I thought you only needed from top down order... :P Just give me a few minutes and I'll provide the corrected code.
I've made a second update ("UPDATE 2"), I think it is what you need.
yes buddy, it was quite helpful and now i modified your code to add and remove the dom elements.

core1024 · Accepted Answer · 2012-10-16 08:11:20Z

0

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.

edited Oct 16, 2012 at 8:11

answered Oct 16, 2012 at 7:51

core1024

1,88215 silver badges22 bronze badges

2 Comments

user1490244 Over a year ago

great! this one works in all directions can we modify it, in way such that instead of disabling it, can you add and remove the child node from the select? that is what my real requirement is in the application.

core1024 Over a year ago

I didn't disable anything. I just hide and show different elements. I can't understand what do you mean with "add and remove the child node from the select". Do you mean select's "option" by "child node"?

Collectives™ on Stack Overflow

dynamic select box adding and removing its options dynamically in js

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related