Question

我有2个选择下拉列表，每个下拉列表都有一堆元素（下面只是一个例子）。

<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>

当选择第一个下拉元素时，如何在第二个下拉列表中识别某些选项。（例如，如果在下拉列表＃1中选择1，那么1 + 2 = 2选项应隐藏在下拉列表＃2中，如果在＃1中看到2，则2 + 2 =（4）应隐藏在＃2中等等。

我想我需要用这样的方法来处理它：

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

接下来我该怎么做？

Answer 1

没有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

Answer 2

选择1删除2,2删除4,3删除6,4从第二个下拉删除8。

  <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>

Answer 3

另一种选择：

<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>

隐藏选择下拉列表的元素

3 个答案: