CODEWITHSUNDEEP
javascript
Hypn0tizeR
Hypn0tizeR

Reputation: 794

Adding/Removing/Updating options from select inputs

Here is what I've started to do: http://jsfiddle.net/nd9ny/

For now it doesn't work as I want it to.

I want to update options each time when a new select input is added or an input is removed.

For example, we have our first select input with these options:

<select>
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
</select>

When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.

<select>
    <option value="1" selected></option>
    <option value="3"></option> // The second one is removed
    <option value="4"></option>
</select>

<select>
    <option value="2" selected></option> // The first one is removed
    <option value="3"></option>
    <option value="4"></option>
</select>

And then, If I remove the first input, the second one becomes:

<select>
    <option value="1"></option>
    <option value="2" selected></option>
    <option value="3"></option>
    <option value="4"></option>
</select>

Pure Javascript code needed.

Upvotes: 0

Views: 119

Answers (1)

Littm
Littm

Reputation: 4947

You may try the following solution:

- CSS:

.hidden {
    display: none;  
}

- JS function:

function hide_selected(el) {

    var index = el.selectedIndex;

    // Show every options
    for(var i=0; i<el.length; i++)
        el[i].className="";

    // Hide the selected one
    el[index].className="hidden";
}

- HTML example:

<body>
    <select onchange="javascript:hide_selected(this);">
        <option value="1" class="hidden" selected="selected">1</option>
        <option value="2" class="">2</option>
        <option value="3" class="">3</option>
        <option value="4" class="">4</option>
    </select>
</body>

Note: This function was tested with Firefox, you may have to check if this works with other browsers.

Hope this helps

Upvotes: 1

Related Questions