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

将change事件添加到select元素，查看所选选项是否为“其他”，隐藏文本区域，否则显示。

const textareaEle = document.querySelector('textarea');

document.querySelector('select').addEventListener('change', function() {
  textareaEle.style.display = (this.value == 'Other') ? 'block' : 'none';
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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">Other feedback (free text)</option>
</select>

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

Answer 2

您可以将使用onchange事件的select中的值传递给函数，并检查该值是否等于Others，如果是，则display textarea，否则返回hide it。工作示例：

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>

Answer 3

我还没有检查，但是我了解您的代码中您试图删除您尚未分配的类（隐藏），因为您隐藏了具有属性样式的文本区域

请尝试此示例，我理解您的示例中您使用了引导程序，为进行演示，我添加了隐藏

const feed = document.querySelector('#feed');
const fbtext = document.querySelector('#fb_text');

feed.addEventListener('change', handleChange);

function handleChange(event) {
    const value = event.target.value;

    if (value === 'Other') {
        fbtext.classList.remove('hide');

        return false;
    }

    fbtext.classList.add('hide');
}

.hide {
    display: none;
}

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

<div class="form-group">
    <label for="fb_text"></label>
    <textarea
        class="form-control hide"
        name="fb_text"
        id="fb_text"
        rows="5"
        placeholder="Describe yourself here..."
    ></textarea>
</div>

选择特定选项后如何显示文本区域

3 个答案: