如何在选择任何下拉值时显示/隐藏 DIV？答案

【问题标题】：How to show/hide DIV on selection of ANY drop-down value?如何在选择任何下拉值时显示/隐藏 DIV？
【发布时间】：2013-08-23 14:20:35
【问题描述】：

我已经找到了很多问题的答案：

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

但是我找不到答案：如何在选择任何下拉值时显示/隐藏 div，例如

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

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

JSfiddle 解决方案将是完美的

非常感谢！

【问题讨论】：

答案可以包括jQuery的使用吗？
@oskar-hane 是的可选

标签： javascript html hide show

【解决方案1】：

试试这个 -

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

【讨论】：

【解决方案2】：

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

小提琴 http://jsfiddle.net/Sj5FN/1/

【讨论】：

神奇而简单，感谢凯文的帮助。刚刚测试，它的工作原理
@ghilton 很高兴我能帮上忙。写一些原生的 JS 真好。
嗨，Kevin，我仍然对您昨天的解决方案感到满意。只有一个警告 - 如果我将问题一设置为默认“选择”，即<option value="1" selected>Question One</option>，那么我希望 DIV 默认显示，但它仍然隐藏。是否对您的代码进行了修改以解决此问题？如果我不清楚，请告诉我，我会进一步解释

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个：

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>

【讨论】：

【解决方案5】：

在onchange中添加如下函数，

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

并将 div 的显示样式（需要隐藏/显示）设置为无。查看演示here

【讨论】：

【解决方案6】：

为什么不使用事件？像下面这样：

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

【讨论】：

【解决方案7】：

这对我有用，这是一种更强大的方法，因为使用 has 和 contains 方法，因此您可以使用通配符

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

【讨论】：

这很好，因为它显示了一个多 div 示例。这在我正在处理的多个 php 项目中会很方便

【解决方案8】：

试试这个：

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

根据您的要求

【讨论】：

我喜欢这个答案，因为它显示了多个 div 的动态需求。这会很有用

【解决方案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>

【讨论】：

【解决方案10】：

您可以将 jQuery 的 change() 方法与 show() 和 hide() 方法结合使用。以下示例中的 div 块默认使用 CSS display 属性隐藏，该属性设置为 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();
});

您可以在此处查看示例：How to show/hide DIV on selection of ANY drop-down value?

【讨论】：