如何在选择任何下拉值时显示/隐藏DIV？ [英] How to show/hide DIV on selection of ANY drop-down value?

问题描述

我如何在选择其他下拉值时显示/隐藏DIV。

然而，我无法找到答案：如何在选择任何下拉值时显示/隐藏div，例如

 < select class =defaultid =security_question_1name =security_question_1> 
< option value =selected>选择问题...< / option> 
< option value =1>问题一< / option> 
< option value =2>问题二< / option> 
< option value =3>问题三< / option> 
< option value =4>问题四< / option> 
< option value =5>问题五< / option> 
< option value =6>问题六< / option> 
< / select> 
  

如果选择上述任何一个选项，我希望能够显示DIV。

当用户选择1,2,3,4,5或6时，我想显示一个DIV。如果用户将他们的选择恢复为选择问题...，则该DIV将再次隐藏。

JSfiddle解决方案将是完美的

非常感谢！

解决方案

  var elem = document.getElementById（security_question_1）; 
 elem.onchange = function（）{
 var hiddenDiv = document.getElementById（showMe）; 
 hiddenDiv.style.display =（this.value ==）？ 无：块; 
}; 
  

HTML

 < select class =defaultid =security_question_1name =security_question_1> 
< option value =selected>选择问题...< / option> 
< option value =1>问题一< / option> 
< option value =2>问题二< / option> 
< option value =3>问题三< / option> 
< option value =4>问题四< / option> 
< option value =5>问题五< / option> 
< option value =6>问题六< / option> 
< / select> 
< div id =showMe>所选值< / div> 
  

CSS

  #showMe {
 display：none; 
 
 
 
 
 $ b 
  FIDDLE  
 http://jsfiddle.net/Sj5FN/1/  
 
I have found many answers to the question:

  
How do I show/hide DIV on selection of "Other" dropdown value.
However I cannot find the answer to this: How do I show/hide div on selection of ANY dropdown value, e.g.
<select class="default" id="security_question_1" name="security_question_1">
        <option value="" selected>Select question...</option>
        <option value="1">Question One</option>
        <option value="2">Question Two</option>
        <option value="3">Question Three</option>
        <option value="4">Question Four</option>
        <option value="5">Question Five</option>
        <option value="6">Question Six</option> 
    </select>
I want to be able to show a DIV if any of the above options are selected. 

When the user selects 1, 2, 3, 4, 5, or 6 I want to show a DIV. If the user reverts their selection back to "Select question..." this DIV will hide again

A JSfiddle solution would be perfect

Many thanks!
解决方案
Javascript
var elem = document.getElementById("security_question_1");
elem.onchange = function(){
    var hiddenDiv = document.getElementById("showMe");
    hiddenDiv.style.display = (this.value == "") ? "none":"block";
};
HTML
<select class="default" id="security_question_1" name="security_question_1">
        <option value="" selected>Select question...</option>
        <option value="1">Question One</option>
        <option value="2">Question Two</option>
        <option value="3">Question Three</option>
        <option value="4">Question Four</option>
        <option value="5">Question Five</option>
        <option value="6">Question Six</option> 
    </select>
<div id="showMe">Value Selected</div>
CSS
#showMe{
    display:none;
}
FIDDLE
http://jsfiddle.net/Sj5FN/1/

                        
这篇关于如何在选择任何下拉值时显示/隐藏DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！