时间戳

首页 > 解决方案 > HTML&JS 如果选择了我的值，打开 textarea

javascript - HTML&JS 如果选择了我的值，打开 textarea

问题描述

我想3在select表单中选择值，立即打开textarea。我不想刷新页面。

<select id="work">
  <option value="1" selected="">Waiting</option>
  <option value="2">Accept</option>
  <option value="3">Failed</option>
  <option value="4">Transfer</option>
  <option value="5">Finish</option>
</select>

<textarea id="notes"></textarea>

标签： javascripthtml

解决方案

您可以隐藏textareausing CSS In a function 检查是否选择了值 3 然后使其可见

HTML：

<select id="work">
  <option value="1" selected="">Beklemede</option>
  <option value="2">İş Alındı</option>
  <option value="3">İş Alınamadı</option>
  <option value="4">Atölyede</option>
  <option value="5">Teslim Edildi</option>
</select>

<textarea id="notes"></textarea>

CSS：

#notes {
  display: none;
}

#notes.show {
  display: block;
}

JS：

const source = document.querySelector("#work");
const target = document.querySelector("#notes");

const displayWhenSelected = (source, value, target) => {
    const selectedIndex = source.selectedIndex;
    const isSelected = source[selectedIndex].value === value;
    target.classList[isSelected
        ? "add"
        : "remove"
    ]("show");
};
source.addEventListener("change", (evt) =>
    displayWhenSelected(source, "3", target)
);

推荐阅读