Javascript 选择选择选项时，如何显示隐藏的div？

我想使用纯JavaScript。我有一个下拉列表，上面有一些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>

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

试试这个：

函数showdivid，元素 { document.getElementByIddivId.style.display=element.value==1？'block'：'none'； } 隐藏分区{ 显示：无； } 不 对

---

这是一个隐藏的div请尝试处理select的更改事件，并使用This.value确定它是否为“Yes”

JS

HTML

---

您应该钩住元素的更改事件，而不是单个选项

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

---

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

不 对 你好，隐藏内容 函数showDivselect{ ifselect.value==1{ document.getElementById'hidden\u div'.style.display=block； }否则{ document.getElementById'hidden\u div'.style.display=none； } }

---

看看我的解决方案

我想使visaCard note div仅在所选卡片类型为visa时可见

这是html

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

---

检查此代码。它提供了使用select项隐藏div的代码

HTML

JS

---

由于更通用，从调用元素传递值更容易维护

在文本字段中指定开始条件显示：无 传递所需的选项值以在其他屏幕上显示/隐藏 传递目标和字段以显示/隐藏标题Other 函数showHideEleselectSrc、targetLeId、triggerValue{ ifselectSrc.value==triggerValue{ document.getElementByIDTargetLeId.style.display=内联块； }否则{ document.getElementByIDTargetLeId.style.display=无； } } -选择 先生 夫人 未击中 其他-

---

您可以使用以下常用函数

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

---

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

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

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

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

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

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

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

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