Geek asks and answers

2 combobox work together

I have two comboboxes: Enable monitoring: Yes / No and also Operating mode: client / server

The default value for the first is No, and the second should be hidden. When I change it to Yes, I want the second combo box to be visible. How can i do this?

    <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>
+3
source share
3 answers

You can do this with Javascript.

Give the second ID option checkbox, and then use Javascript to show / hide it:

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

You can go to the function field by function by reference if you want, and there are many different ways to show / hide elements using Javascript and CSS, but something in accordance with the lines above should help.

0
source

: http://jsfiddle.net/qtHc3/ ( jQuery).

0

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>

But this may not be compatible with the browser, so check carefully.

0
source

More articles:


All Articles