CODEWITHSUNDEEP
javascripthtml
Andrew
Andrew

Reputation: 7778

hide elements of the select dropdown

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?

Upvotes: 0

Views: 865

Answers (3)

RobG
RobG

Reputation: 147403

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>

Upvotes: 1

Boyo
Boyo

Reputation: 1381

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

Upvotes: 3

ltiong_dbl
ltiong_dbl

Reputation: 3216

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>

Upvotes: 2

Related Questions