"選擇選擇選項時如何顯示隱藏的 div？"

Question

我想使用純 JavaScript。 我有一個下拉列表（ <select><\/code>有許多<option><\/code> 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>

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

Answer 2

嘗試處理select的 change 事件並使用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>

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

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

演示

Answer 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;"/>

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

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

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

Answer 9

 function showDiv(divId, element) { document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none'; }<\/code><\/pre>
 #hidden_div { display: none; }<\/code><\/pre>
 <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

<\/code><\/pre>

"

Answer 10

看看我的解決方案

我想讓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';
})