Delete values from the list of options in html

Question

Delete values from the list of options in html

Navigation

#1 by (1 votes)

4

I have one page and I display 4 options for each of the 4 alternatives. Each option is a value from 1 to 4.

I would like every time the user selects a value, this value would be excluded from the options list 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

asked by anonymous 19.10.2016 / 06:35

1 answer

Fill a listview with the properties of a class in delphi How to update a DropDownList without refreshing the page

score 1 · Accepted Answer

As you have not mentioned if you are using jQuery or another library, I will put an example in pure javascript:

First, apply the onchange event on all select:

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

Then, the 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's an example: link