How to show/hide DIV on selection of ANY drop-down value?

Question

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!

Answer 1

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/

Answer 2

Try this:

HTML:

<div>
        <select>
            <option value="choose">Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Javascript:

$(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").hide();
                    $(".red").show();
                }
                if($(this).attr("value")=="green"){
                    $(".box").hide();
                    $(".green").show();
                }
                if($(this).attr("value")=="blue"){
                    $(".box").hide();
                    $(".blue").show();
                }
                if($(this).attr("value")=="choose"){
                    $(".box").hide();
                    $(".choose").show();
                }
            });
        }).change();
    });

Working Demo

as per your requirement

Answer 3

add the following function to the onchange,

function showHide(value) {
    if (value=='')
        document.getElementById('divShow').style.display = 'none';
    else
        document.getElementById('divShow').style.display = 'block';
}

and set the display style of the div (which is needed to hide/shown) to none initially. Check demo here

Answer 4

Try this -

$( "#security_question_1" ).change(function () {
    if($( "option:selected", this ).text()=="text you want to match"){
       $("#div-id").hide();
    }else{
       $("#div-id").show();        
    }
});

Answer 5

Try this :

Javascript :

function check_dd() {
    if(document.getElementById('security_question_1').value == "") {
        document.getElementById('test').style.display = 'none';
    } else {
        document.getElementById('test').style.display = 'block';
    }
}

HTML :

<select class="default" id="security_question_1" name="security_question_1" onchange="check_dd();">
    <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="test" style="display:none;">test</div>

Answer 6

<select class="default" id="security_question_1" name="security_question_1">
        <option value="" id="hide-div"selected>Select question...</option>
        <option value="1" id="show-div">Question One</option>
        <option value="2" id="show-div">Question Two</option>
        <option value="3" id="show-div">Question Three</option>
        <option value="4" id="show-div">Question Four</option>
        <option value="5" id="show-div">Question Five</option>
        <option value="6" id="show-div">Question Six</option> 
    </select>

$(document).ready(function(){
   $(".spl-div").hide();   
   $("option[id*='show-div']").bind('click', function(){
            $('.spl-div').show();
    });
    $("option[id*='hide-div']").bind('click',function(){
            $(".spl-div").hide();
    })
});

Answer 7

Why don't use event? like the following:

<select class="default" id="security_question_1" name="security_question_1" onchange="itemChange(this)">
        <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="content" style="visibility:hidden">selection result
</div>

function itemChange(sender) {
    var c = document.getElementById("content");
    if (sender.value > 0) {
        c.innerHTML = sender.value;
        c.style.visibility = "visible";
    } else {            
        c.innerHTML = "selection result";   
        c.style.visibility = "hidden";
    }
}

Answer 8

This worked for me , this is a more powerful method because use the has and contain method so you can use wildcards

$( "YOURSELECT" ).change(function () {
if($("YOURSELECT").has('option:selected:contains(YourWord)').length){
$("ELEMENT-TO-HIDE-IF-CONDITION-MATCH").hide();
}else{
$("ELEMENT-TO-HIDE-IF-CONDITION-MATCH").show();        
}
});

Answer 9

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
    .resposnsiveImg{width: 100%; height:345px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;}
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2 col-sm-2 col-xs-12">
                <select id="mySelect" onchange="mySelectfunction()" class="form-control">
                    <option value="">Select</option>
                    <option value="img1">img1</option>
                    <option value="img2">img2</option>
                    <option value="img3">img3</option>
                    <option value="all">all</option>
                </select>
                <script>
                    function mySelectfunction(){
                        getValue = document.getElementById("mySelect").value;
                        if(getValue == "img1"){
                            document.getElementById("img1").style.display = "block";
                            document.getElementById("img2").style.display = "none";
                            document.getElementById("img3").style.display = "none";
                        }
                        if(getValue == "img2"){
                            document.getElementById("img1").style.display = "none";
                            document.getElementById("img2").style.display = "block";
                            document.getElementById("img3").style.display = "none";
                        }
                        if(getValue == "img3"){
                            document.getElementById("img1").style.display = "none";
                            document.getElementById("img2").style.display = "none";
                            document.getElementById("img3").style.display = "block";
                        }
                        if(getValue == "all"){
                            document.getElementById("img1").style.display = "block";
                            document.getElementById("img2").style.display = "block";
                            document.getElementById("img3").style.display = "block";
                        }
                    }
                </script>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-4 col-md-4 col-xs-12" id="img1" style="display:none;"><img src="https://www.w3schools.com/html/pulpitrock.jpg" class="resposnsiveImg" /></div>
            <div class="col-sm-4 col-md-4 col-xs-12" id="img2" style="display:none;"><img src="https://www.w3schools.com/html/img_girl.jpg" class="resposnsiveImg" /></div>
            <div class="col-sm-4 col-md-4 col-xs-12" id="img3" style="display:none;"><img src="https://www.w3schools.com/html/img_chania.jpg" class="resposnsiveImg" /></div>
        </div>
    </div>
</body>
</html>