选择选择选项时如何显示隐藏的 div？答案

【问题标题】：How can I show a hidden div when a select option is selected?选择选择选项时如何显示隐藏的 div？
【发布时间】：2013-04-07 14:41:06
【问题描述】：

我想使用纯 JavaScript。我有一个下拉列表（<select> 有多个 <option>s）。选择某种选项时，我希望隐藏的div显示。

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

然后我用这个香草 JavaScript 代码尝试它：

function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}

我猜我的问题是我的选项中的 onClick 触发器，但我不确定还可以使用什么？

【问题讨论】：

标签： javascript html event-handling

【解决方案1】：

试试这个：

function showDiv(divId, element)
{
    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

#hidden_div {
    display: none;
}

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

【讨论】：

在页面首次加载时调用showDiv() 函数也是一个好主意。用户可能正在重新加载之前选择“是”选项的页面。
@Matei Mihai 你好，如果我们有更多选项要禁用 div 怎么办？就像我们有 3 个选项，选择其中 2 个将禁用 div。希望您提前回复谢谢。

【解决方案2】：

尝试处理select 的更改事件并使用this.value 来确定它是否为“是”。

jsFiddle

JS

document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

HTML

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

<div id="hidden_div" style="display: none;">Hello hidden content</div>

【讨论】：

【解决方案3】：

我认为这是一个合适的解决方案：

<select id="test" name="form_select" onchange="showDiv(this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>

<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hidden_div').style.display = "block";
   } else{
    document.getElementById('hidden_div').style.display = "none";
   }
} 
</script>

【讨论】：

【解决方案4】：

您应该挂钩<select> 元素的更改事件，而不是单个选项。

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

// attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
    // of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

Demo

【讨论】：

【解决方案5】：

更通用，从调用元素传递值（更易于维护）。

在文本字段中指定开始条件（显示：无）
传递所需的选项值以显示/隐藏（“其他”）
传递目标和字段以显示/隐藏（“TitleOther”）

function showHideEle(selectSrc, targetEleId, triggerValue) {	
	if(selectSrc.value==triggerValue) {
		document.getElementById(targetEleId).style.display = "inline-block";
	} else {
		document.getElementById(targetEleId).style.display = "none";
	}
}

<select id="Title"
   onchange="showHideEle(this, 'TitleOther', 'Other')">
      <option value="">-- Choose</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Other">Other --&gt;</option>						
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title" 
    style="display:none;"/>

【讨论】：

【解决方案6】：

检查此代码。使用选择项隐藏 div 的代码很棒。

HTML

<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
    <option value="1">YES</option>
    <option value="2">NO</option>
</select>

<div id="div1" style="display:block;">
    <input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
    <input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
    <input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
    <input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
    <datalist id="cars">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
        <option>Value 4</option>
    </datalist>
</div>

JS

<script>
    function showDiv(prefix,chooser) 
    {
            for(var i=0;i<chooser.options.length;i++) 
            {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
            }

            var selectedOption = (chooser.options[chooser.selectedIndex].value);

            if(selectedOption == "1")
            {
                displayDiv(prefix,"1");
            }
            if(selectedOption == "2")
            {
                displayDiv(prefix,"2");
            }
    }

    function displayDiv(prefix,suffix) 
    {
            var div = document.getElementById(prefix+suffix);
            div.style.display = 'block';
    }
</script>

【讨论】：

【解决方案7】：

<select id="test" name="form_select" onchange="showDiv()">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
    function showDiv(){
        getSelectValue = document.getElementById("test").value;
        if(getSelectValue == "1"){
            document.getElementById("hidden_div").style.display="block";
        }else{
            document.getElementById("hidden_div").style.display="none";
        }
    }
</script>

【讨论】：

【解决方案8】：

您可以使用以下常用功能。

<div>
     <select class="form-control" 
             name="Extension for area validity sought for" 
             onchange="CommonShowHide('txtc1opt2', this, 'States')"
     >
         <option value="All India">All India</option>
         <option value="States">States</option>
     </select>

     <input type="text" 
            id="txtc1opt2" 
            style="display:none;" 
            name="Extension for area validity sought for details" 
            class="form-control" 
            value="" 
            placeholder="">

</div>

<script>
    function CommonShowHide(ElementId, element, value) {
         document
             .getElementById(ElementId)
             .style
             .display = element.value == value ? 'block' : 'none';
    }
</script>

【讨论】：

【解决方案9】：

看看我的解决方案

我想让visaCard-note div 仅在选中cardType 为visa 时才可见

这里是html

<select name="cardType">
    <option value="1">visa</option>
    <option value="2">mastercard</option>
</select>

这里是js

var visa="1";//visa is selected by default 
$("select[name=cardType]").change(function () {
    document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})

【讨论】：