我有一個下拉輸入
<select id="training" name="TrainingTopic">
<option value="training 10">training 10</option>
<option value="training 9">training 9</option>
</select>當我選擇其中一個選項時，下拉文本更改為所選選項文本，我可以通過 js 更改下拉占位符上的此文本嗎？例如，當我打開下拉選單時，我看到training 10和training 9選項，但是當我選擇一個時，我需要在占位符中自定義文本，例如，“你選擇了培訓 9”，并且在選項的下拉文本中仍然應該是“培訓 9 " 以及下拉輸入的值。
uj5u.com熱心網友回復：
使用一個hidden選項和下面的 JS
const elTrainingSelect = document.querySelector("#training");
const elTrainingHolder = elTrainingSelect.querySelector("option");
elTrainingSelect.addEventListener("input", () => {
elTrainingHolder.value = elTrainingSelect.value;
elTrainingHolder.textContent = `You selected: ${elTrainingSelect.value}`;
elTrainingSelect.selectedIndex = 0;
});
// Test
const elForm = document.querySelector("form");
elForm.addEventListener("submit", (ev) => {
ev.preventDefault();
const formData = new FormData(elForm);
console.log([...formData.values()])
});<form>
<select id="training" name="TrainingTopic">
<option hidden>Select a training</option>
<option value="training 10">training 10</option>
<option value="training 9">training 9</option>
</select>
<button type="submit">SEND</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/529282.html
下一篇：C#在FormsApp中畫線