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

IT技术 javascript html event-handling
2021-01-31 15:57:57

我想使用纯 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 触发器，但我不确定还能使用什么？

6个回答

试试这个：

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>

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

尝试处理select和 using的更改事件this.value以确定它是否为“是”。

js小提琴

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>

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

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

您应该挂钩<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);
    });
}

演示

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

  • 在文本字段中指定开始条件（显示：无）
  • 传递所需的选项值以显示/隐藏（“其他”）
  • 传递目标和字段以显示/隐藏（“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;"/>

其它你可能感兴趣的问题
上一篇如何删除 tinyMCE，然后重新添加它？ 下一篇谷歌地图 V3 上的旋转图像/标记图像