javascript - 如何在选择某个选项后显示文本区域

Question

我有一个未显示的 textarea 元素。如果用户在 select 元素中选择“其他”选项，则文本区域应该显示，但在下面的代码中没有显示。

以下是我的 select 元素:

<select class="form-control" name="feed" id="feed" value="" style="width:540px">
    <option selected="selected" disabled="true">Please select</option>
    <!-- <option></option> -->
    <option value="Excellent" id="Excellent"> All text is excellent</option>

    <option value="Other" id="Other" onclick="showHide(this)"
        >Other feedback (free text)</option
    >
</select>

以下是我的 textarea 元素:

<div class="form-group">
    <label for="fb_text"></label>
    <textarea
        class="form-control"
        name="fb_text"
        id="fb_text"
        rows="5"
        placeholder="Describe yourself here..."
        value=""
        style="width:540px;display:none"
    ></textarea>
</div>

以下是我的JS:

function showHide(elm) {
    var Fbtext = document.getElementById("fb_text");

    if (document.getElementById("feed").value == "Other") {
        Fbtext.classList.remove("hide");
    }
}

Answer 1

您可以使用 onchange 事件将 select 中的值传递给您的函数，并检查该值是否等于 Others 如果是的话 display textarea else 隐藏它。工作示例:

function showHide(elm) {


  if (elm == "Other") {
  //display textbox
    document.getElementById('fb_text').style.display = "block";
  } else {
  //hide textbox
    document.getElementById('fb_text').style.display = "none";
  }

}

<select class="form-control" name="feed" id="feed" value="" onchange="showHide(this.value)" style="width:540px">
  <option selected="selected" disabled="true">Please select</option>
  <!-- <option></option> -->
  <option value="Excellent" id="Excellent"> All text is excellent</option>

  <option value="Other" id="Other">Other feedback (free text)</option>
</select>

<div class="form-group">
  <label for="fb_text"></label>
  <textarea class="form-control" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;display:none"></textarea>

</div>