Delete values from the html list of options

Asked

Viewed 800 times

4

I have a page and I show 4 options for each of the 4 alternatives. Each option has a value from 1 to 4.

I would like that each time the user selects a value, this value is deleted from the list of options of the other alternatives, forcing the user not to repeat the values for each alternative.

Code with alternatives and options in html:

<body>
    <h1>Avalie de 1 a 4 sem repetir</h1>
    <div id="p1">
        <form id="form1" action="" method="get">
            <label class="control-label" for="a1"> <strong> Organizado</strong></label>
            <select name="a1">
                <option  id="a1" name="a1" value="4" /> 4<br />
                <option  id="a1" name="a1" value="3" /> 3<br />
                <option  id="a1" name="a1" value="2" /> 2<br />
                <option  id="a1" name="a1" value="1" /> 1<br />
            </select>
            <br /><br />
            <label class="control-label" for="b1"> <strong> Criativo</strong></label>
            <select name="b1">
                <option  id="b1" name="b1" value="4" /> 4<br />
                <option  id="b1" name="b1" value="3" /> 3<br />
                <option  id="b1" name="b1" value="2" /> 2<br />
                <option  id="b1" name="b1" value="1" /> 1<br />
            </select>
            <br /><br />
            <label class="control-label" for="c1"> <strong> Independente</strong></label>
            <select name="c1">
                <option  id="c1" name="c1" value="4" /> 4<br />
                <option  id="c1" name="c1" value="3" /> 3<br />
                <option  id="c1" name="c1" value="2" /> 2<br />
                <option  id="c1" name="c1" value="1" /> 1<br />
            </select>
            <br /><br />
            <label class="control-label" for="d1"> <strong> Impulsivo</strong></label>
            <select name="d1">
                <option  id="d1" name="d1" value="4" /> 4<br />
                <option  id="d1" name="d1" value="3" /> 3<br />
                <option  id="d1" name="d1" value="2" /> 2<br />
                <option  id="d1" name="d1" value="1" /> 1<br />
            </select>
            <br />

        </form>
    </div>
</body>
javascript html html5
  • 2

    Hello Bruno. This is an interesting and complex problem. Take a look here: https://jsfiddle.net/hghv56ks/ How do you want it to happen after the 4 selects have been selected once, and wanting to change the values again?

1 answer

1


As you didn’t mention if you’re using jQuery or another library, I’ll put an example in pure javascript:

First, apply the onchange event to all select:

<select name="a1" id="a1" onchange="valorSelecionado(this)">

Then Function to check the selected value and remove from the other select:

function valorSelecionado(sel) {
  var val = sel.selectedIndex;
  var id = sel.id;

  var selects = document.getElementsByTagName('select');
  for(var i = 0; i < selects.length; ++i) {
    var s = selects[i];
    if (s.id != id) {
       s.removeChild(s[val])
    }
  } 
}

Here an example: https://jsfiddle.net/jcsj9ddz/

  • Hello Ricardo, you can add an example of this code in operation?

  • @Sergio yes, I edited the comment

  • Good, so it’s clearer. East my comment on top? that problem is still unresolved. In your answer it is also irreversible to put the options removed again. I think a softer approach would be better.

  • Yes, it would be better to have an object with the options to be able to revert (add again if necessary). Another thing, once the user selected an option, that select should be disabled (in my opinion), to avoid selecting another item and remove from the other selects, ie in this code, if the user selects 3 different values in the first select (select each value at once), these values will disappear from the other selects, this is bad :)

  • It is true friends, the problem is that from there it is not possible to modify the answer if the user has inserted wrong.

  • Anyway thanks this help already gave to give a lightening

  • Okay, don’t forget to vote on the answer if it was helpful.

Show 2 more comments

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.