如何根据选择更新 div？答案

【问题标题】：How can I update a div based on a selection?如何根据选择更新 div？
【发布时间】：2021-10-02 16:52:46
【问题描述】：

我希望，当用户在 HTML 中选择一个选项时，我会在另一个 div 上显示 Block。

我将函数 OpenAskuser() 放在一个按钮中，但也不起作用。它会更好，没有按钮。就在用户选择“是”选项时。 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">
  <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>

【问题讨论】：

在你的函数后面加上document.getElementById('imputYesNo').addEventListener('change', OpenAskuser);。
“输入”，而不是“输入”。
请参阅How to Ask 并使用tour。不要发布“谢谢”，也不要发布 cmets 作为答案。

标签： javascript html forms options selected

【解决方案1】：

您需要附加一个调用该函数的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>

【讨论】：

@Lasticot 如果它解决了你的问题，请考虑接受我的回答:)