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

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'选项，以便在第一个下拉列表的值上显示。

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

利用文档对象模型（DOM）和Javascript事件来操作HTML节点。