隐藏元素的选择下拉列表

我有一个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，则应在下拉＃2中隐藏1 + 2 = 2选项，如果在＃1中观察到2，则应该在＃2中隐藏2 + 2 =（4）。等

我想我需要像这样的东西接近它？

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

我应该怎么做下一

来源

2012-05-25 Andrew

我不明白你在问什么。你在哪里得到1 + 2 = 2和2 + 2 = 4来确定应该隐藏的选项？ – Kyle

这已经在早些时候回答。 [点此EEE相关线索] [1] [1]：http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-使用-jquery – Vineet

只有一些浏览器支持隐藏选项元素，所以对于一个可以在任何地方工作的解决方案，你必须实际删除选项（如果需要，以后再重新添加）。请参阅http://stackoverflow.com/questions/7804111/selectbox-hide-first-option-entry-on-dropdown – nnnnnn

另一种选择：

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

来源

2012-05-25 07:21:36 RobG

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

来源

2012-05-25 05:56:47

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

来源

2012-05-25 05:58:02 Boyo

隐藏元素的选择下拉列表

回答

相关问题