2个组合框共同工作

问题描述

| 我有两个组合框： 启用监视：是/否 和 操作模式：客户端/服务器 第一个的默认值为\'No \'，第二个应隐藏。当我将其更改为“是”时，我希望第二个组合框可见。我怎样才能做到这一点？

    <tr>
        <td width=\"25%\" class=\"titulos\" nowrap>Enable monitoring:</td>
        <td width=\"75%\" class=\"dados\" nowrap>
        <select class=\"dados\" name=\"proxyconf\" onchange=\"showOptions ();\">
        <option value=\"1\" selected>No</option>
        <option value=\"2\" >Yes</option>
        </select>
        </td>
    </tr>
    <tr>
        <td width=\"25%\" class=\"titulos\" nowrap>Operation Mode:</td>
        <td width=\"75%\" class=\"dados\" nowrap>
        <select class=\"dados\" name=\"proxyconf\" onchange=\"showOptions ();\">
        <option value=\"1\" selected>No</option>
        <option value=\"2\" >Yes</option>
        </select>
        </td>
    </tr>   

    

解决方法

您可以使用Javascript完成。 给第二个选项框指定一个ID，然后使用Javascript显示/隐藏它：

<script type=\"text/javascript\">
function showOptions() {
  var elem = document.getElementById(\"id_of_second_box\");
  elem.style.display = \"block\";
}
</script>

如果愿意，可以通过引用将选项框传递给函数，并且有许多不同的方式使用Javascript和CSS显示/隐藏元素，但是上述类似的方法应该会有所帮助。     ,我将以这种方式进行操作：http://jsfiddle.net/qtHc3/（示例使用jQuery）。     ,使用JavaScript：

 function showOptions(elem){
  if(elem.value == \"2\"){
    document.getElementById(\"second\").style.visibility = \"visible\";   
  }else{
   document.getElementById(\"second\").style.visibility = \"hidden\";      
  }
}

和第一个组合框：

 <select class=\"dados\" name=\"proxyconf\" onchange=\"showOptions(this);\" id=\"first\">
    <option value=\"1\" selected>No</option>
    <option value=\"2\" >Yes</option>
 </select>

第二个：

  <select class=\"dados\" name=\"proxyconf\" onchange=\"\" id=\"second\" style=\"visibility:hidden\">
    <option value=\"1\" selected>No</option>
    <option value=\"2\" >Yes</option>
  </select>

但这可能与跨浏览器不兼容，因此请仔细检查。