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

前端未结

关注

 9  929

陌清茗

I have found many answers to the question:

How do I show/hide DIV on selection of \"Other\" dropdown value.

However I cannot fin

相关标签:

9条回答

甜味超标

2020-12-10 22:40

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

0 讨论(0)

春和景丽

2020-12-10 22:42
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

一整个雨季

2020-12-10 22:49

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

0 讨论(0)

既然无缘

2020-12-10 22:54

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

0 讨论(0)

谎友^

2020-12-10 22:58

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>

0 讨论(0)

南旧

2020-12-10 22:59

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

0 讨论(0)

1 2 下一页