在使用 javascript 的 select 標簽中選擇選項時如何觸發事件

Question

我有一個帶有一些選項的 select 標簽。 用戶選擇其中一個選項，如果用戶想要的選項不存在，他們 select 最后一個選項是“其他（請在下面的框中提及主題）”，然后在 select 標記下方出現文本輸入，並且用戶在那里輸入主題。

我已經編寫了一個腳本，但它僅在選擇最后一個選項並且重新加載頁面時出現輸入時才起作用。 我希望它在用戶選擇最后一個選項時出現，並在用戶選擇其他選項之一時消失，而不僅僅是在重新加載頁面時。

這是我的代碼：

 let others = document.getElementById('others'); let options = document.getElementById('subject'); if (options.value == "4") { others.className = "shown"; } else { others.className = "hidden"; }

 .hidden { display: none; }.shown { display: block; }

 <select name="subject" id="subject"> <option selected>Choose one of the options</option> <option value="1">Report a problem</option> <option value="2">Ask a question</option> <option value="3">Suggest an item or feature</option> <option value="4">Others (please mention the subject in the box bellow)</option> </select> <input type="text" class="" placeholder="Write your message's subject here" id="others">

Answer 1

您可以在select標簽上使用onchange事件來監聽值更改以顯示/隱藏您的輸入字段。

 let others = document.getElementById('others'); let options = document.getElementById('subject'); //your logic is wrapped into a function function updateInputDisplay(optionValue) { if (optionValue == "4") { others.className = "shown"; } else { others.className = "hidden"; } } //whenever the option value gets updated, it will trigger this for input display check options.onchange = (e) => { updateInputDisplay(e.target.value) } //the initial input display check if the default value is `Others` (showing the input field) updateInputDisplay(options.value)

 .hidden { display: none; }.shown { display: block; }

 <select name="subject" id="subject"> <option selected>Choose one of the options</option> <option value="1">Report a problem</option> <option value="2">Ask a question</option> <option value="3">Suggest an item or feature</option> <option value="4">Others (please mention the subject in the box bellow)</option> </select> <input type="text" class="hidden" placeholder="Write your message's subject here" id="others">

Answer 2

你的問題是這里的代碼：

let others = document.getElementById('others');
let options = document.getElementById('subject');

if (options.value == "4") {
  others.className = "shown";
} else {
  others.className = "hidden";
}

僅在加載頁面時運行一次，這解釋了您提到的行為。 相反，您必須做的是確保每次您的 select 值更改時都會觸發您的代碼，方法是將您的代碼包裝為 function 的內容，每次您的select標記的值發生更改時都會運行，例如：18F4

function valueChanges() {
let others = document.getElementById('others');
let options = document.getElementById('subject');

if (options.value == "4") {
  others.className = "shown";
} else {
  others.className = "hidden";
}
}

document.getElementById('subjects').addEventListener('change',valueChanges);

// And run the function on page load as well, as until now
valueChanges();

Answer 3

這是一種方法。

 let others = document.getElementById('others'); let options = document.getElementById('subject'); options.addEventListener('click', () =>{ if (options.value === "4") { others.className = "shown"; } else { others.className = "hidden"; } });

 .hidden { display: none; }.shown { display: block; }

 <select name="subject" id="subject"> <option selected>Choose one of the options</option> <option value="1">Report a problem</option> <option value="2">Ask a question</option> <option value="3">Suggest an item or feature</option> <option value="4">Others (please mention the subject in the box bellow")</option> </select> <input type="text" class="hidden" placeholder="Write your message's subject here" id="others">