Question

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

第一个的默认值是“否”，第二个的默认值应该是隐藏的。当我将其更改为是时，我希望第二个组合框可见。我怎么能这样做？

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

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

2个组合框一起工作

3 个答案: