2个combobox协同工作

Question

我有两个组合框:启用监控:是/否和操作模式:客户端/服务器

第一个的默认值是'No‘，第二个应该是隐藏的。当我将其更改为Yes时，我希望第二个组合框可见。我该怎么做呢？

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

Answer 1

你可以用Javascript做到这一点。

给第二个选项框一个ID，然后使用Javascript显示/隐藏它：

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

如果您愿意，您可以通过引用将选项框传递给函数，并且使用Javascript和CSS有许多不同的方法来显示/隐藏元素，但类似上面的内容应该会有所帮助。

Answer 2

我会这样做：http://jsfiddle.net/qtHc3/ (本例使用jQuery)。

Answer 3

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

但这可能不是跨浏览器兼容的，所以请仔细检查。