javascript - 如何根据选择更新 div?
问题描述
我想,当用户在 HTML 中选择一个选项时,我会在另一个 div 上显示 Block。
我将函数 OpenAskuser() 放在一个按钮中,但也不起作用。它会更好,没有按钮。就在用户选择“是”选项时。显示=块
谢谢社区!!
function OpenAskuser() {
var select = document.getElementById("imputYesNo");
if (select.value === "Yes") {
document.getElementById("AskUser").style.display === "block"
}
}
<p class=title-box-input>Are you member?</p>
<select name="imputYesNo" class=box id="imputYesNo">
<option value="category-default" selected>Choose</option>
<option value=Yes>Yes</option>
<option value="no">No</option>
</select>
<br>
<div class=user-yes id=AskUser style=display:none;>
<p class=title-box-input>Ok, then what is your nickname?</p>
<textarea type="text" class=box> </textarea>
</div>
解决方案
您需要附加一个change
调用该函数的侦听器。
另外,document.getElementById("AskUser").style.display === "block"
是一个比较。=
改为使用为属性分配值:
function OpenAskuser() {
var select = document.getElementById("imputYesNo");
if (select.value === "Yes") {
document.getElementById("AskUser").style.display = "block";
}
}
<p class=title-box-input>Are you member?</p>
<select name="imputYesNo" class=box id="imputYesNo" onchange="OpenAskuser()">
<option value="category-default" selected>Choose</option>
<option value=Yes>Yes</option>
<option value="no">No</option>
</select>
<br>
<div class=user-yes id="AskUser" style=display:none;>
<p class=title-box-input>Ok, then what is your nickname?</p>
<textarea type="text" class=box> </textarea>
</div>
推荐阅读
- c# - 在 C# 中,为什么某些 NuGet 包被命名为 Repacked,例如 Unity.Repacked?
- bootstrap-4 - 使用全宽拆分颜色/图像拆分容器约束内容
- flutter - hooks_riverpod:使用 Riverpod 进行 Flutter Firebase 身份验证,发生错误:提供者试图将“null”分配给不可为空的“exposedvalue”
- r - rval[i, j, drop = drop., ...] 中的错误:下标越界 - 使用 R 中的 eventstudies 包
- python - Django - 自定义 ModelAdmin 以通过相关字段过滤器显示多对多过滤视图(垂直或水平)
- r - 在R中的函数内取消引用参数
- java - 这两个程序的时间复杂度是多少?
- python - 创建递归函数时输入错误
- python-3.x - 你如何从文件行中删除换行符?
- node.js - 节点服务器收到多个请求,而反应客户端只发送一个