Home/ Questions/Q 8592753
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:49:31+00:00

Here is what I’ve started to do: http://jsfiddle.net/nd9ny/ For now it doesn’t work as

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0