CODEWITHSUNDEEP
javascripthtmlhideshow
ghilton
ghilton

Reputation: 127

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

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!

Upvotes: 2

Views: 92583

Answers (10)

thomas
thomas

Reputation: 915

You can use jQuery’s change() method in combination with show() and hide() methods. The div blocks in the following example are hidden by default using the CSS display property, which is set to none.

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var val = $(this).attr("value");
            if(val){
                $(".msg").not("." + val).hide();
                $("." + val).show();
            } else{
                $(".msg").hide();
            }
        });
    }).change();
});

You can see an example here: How to show/hide DIV on selection of ANY drop-down value?

Upvotes: 0

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 2138

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

Upvotes: 0

Gagan Gami
Gagan Gami

Reputation: 10251

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

Upvotes: 9

rafael
rafael

Reputation: 21

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();        
}
});

Upvotes: 0

Dennis
Dennis

Reputation: 31

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";
    }
}

Upvotes: 0

Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

<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();
    })
});

Upvotes: 0

Ayyappan Sekar
Ayyappan Sekar

Reputation: 11485

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

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

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>

Upvotes: 0

Moazzam Khan
Moazzam Khan

Reputation: 3170

Try this - 

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

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/

Upvotes: 16

Related Questions