hide elements of the select dropdown

Question

I have a 2 select dropdowns each of them have bunch of elements (just an example below).

<select id="one">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select id="two">>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
</select>

How do I ide some options in second dropdown when the first dropdown element is selected. (for example, if 1 is selected in dropdown #1, then 1+2=2 option should be hidden in dropdown #2, if 2 is seected in #1, then 2+2=(4) should be hidden in #2. etc.

I guess I need to approach it with something like this:

        document.getElementById("one").onchange = function( ){
            var selectedOption = document.getElementById("one").options[document.getElementById("one").selectedIndex].text; 
        }

What should I do next?

I don't understand what you're asking. Where did you get 1+2=2 and 2+2=4 to determine the options that should be hidden? — Kyle, May 25 '12 at 05:39
This has been answered earlier. [Click here to eee the relevant thread][1] [1]: http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery — Vineet, May 25 '12 at 05:40
Only some browsers support hiding option elements, so for a solution that will work everywhere you have to actually remove the options (and later re-add them if needed). See http://stackoverflow.com/questions/7804111/selectbox-hide-first-option-entry-on-dropdown — nnnnnn, May 25 '12 at 05:49

score 3 · Answer 1 · answered May 25 '12 at 05:58

Without jQuery:

document.getElementById("one").onchange = function( ){
    var selectedOption = this.options[this.selectedIndex].text;

    var option = getElementByText(document.getElementById("two"), selectedOption * 2);
    option.style.display = "none"; // or u car remove it here
}

function getElementByText(parent, text) {
    for (var i = 0; i < parent.children.length; i ++) {
        if (parent.children[i].text == text) {
            return parent.children[i];
        }
    }
    return false;
}

jsfiddle

score 2 · Answer 2 · answered May 25 '12 at 05:56

Selecting 1 removes 2, 2 removes 4, 3 removes 6, 4 removes 8 from second dropdown.

  <script>
    function updateSet2(sel){
      var select2 = document.getElementById("two");
      select2.options.length = 0; //clear

      //repopulate
      select2.options[0] = new Option('2', '2');
      select2.options[1] = new Option('4', '4');
      select2.options[2] = new Option('6', '6');
      select2.options[3] = new Option('8', '8');

      //remove selected
      select2.options.remove(sel - 1);
    }

    var select1 = document.getElementById("one");
    select1.onchange = function(e){
      var selected = this.options[this.selectedIndex]
      updateSet2(selected.text);
    }
  </script>

score 1 · Accepted Answer · answered May 25 '12 at 07:21

another option:

<script>
var doChange = (function() {
  var storedSel;

  return function () {
    var sel0 = this;
    var sel1 = sel0.form.sel1;
    var opt;

    storedSel = storedSel || sel1.cloneNode(true);

    // Show all options of sel1
    sel1.parentNode.replaceChild(storedSel.cloneNode(true), sel1);
    sel1 = sel0.form.sel1;

    // Hide some based on selection
    if (sel0.value == 1) {
      sel1.removeChild(sel1.options[3]);
      sel1.removeChild(sel1.options[1]);

    } else if (sel0.value == 2) {
      sel1.removeChild(sel1.options[2]);
    }
  }
}());

window.onload = function() {
  document.forms.f0.sel0.onchange = doChange;
}
</script>

<form id="f0">
  <select name="sel0" size="4">
    <option value="0">0
    <option value="1">1
    <option value="2">2
    <option value="3">3
  </select>
  <select name="sel1" size="4">
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>
</form>

hide elements of the select dropdown

3 Answers3