选择隐藏和显示中的选项列表

Question

我有2个下拉菜单，我想知道是否有可能在第二个下拉菜单中根据第一个下拉列表中选择的值显示和隐藏某些选项。

<script language="JavaScript"> 
function funchk(){ 
    document.getElementById('z').style.display="block"; 

    } 

    </script> 


    <select name="first" onchange="funchk();"> 
     <option name="asw" value="a">sda</option> 
     <option name="sd" value="sd">ZZ</option> 
    <option name="rdf" value="afe">fe</option> 
     <option name="bfe" value="bfe">fe3</option> 
     </select>   <?php echo "<br/>" ?> 
    <select name="second"> 
     <option name="a" value="a">aa</option> 
     <option name="z" value="a" style="display:none">ZZ</option> 
     <option name="r" value="a" style="display:none">aa</option> 
     <option name="b" value="b">bb</option> 
     </select> 

在这里，我想以显示第二下拉的“Z”选项来onchging第一下拉的值时被显示。

Answer 1

不，您不能依靠设置CSS来显示/隐藏<option>元素。

您需要删除它们，或者只是简单地禁用/启用它们。

function funchk() { 
    document.getElementsByName('z')[0].disabled = false; 
} 

---

<select name="second"> 
    <option name="a" value="a">aa</option> 
    <option name="z" value="a" disabled="disabled">ZZ</option> 
    <option name="r" value="a" disabled="disabled">aa</option> 
    <option name="b" value="b">bb</option> 
</select> 

Answer 2

你需要做的是用JavaScript

在这里你可以找到不同的例子如何做到这一点。

http://www.satya-weblog.com/2008/08/javascript-remove-delete-select-option.html

http://www.plus2net.com/javascript_tutorial/list-remove.php

Answer 3

使用带JavaScript事件以及文档对象模型（DOM）来操作HTML节点。