更改下拉占位符文本

Question

我有一个下拉输入

​

<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“和下拉输入的值。

Answer 1

使用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>

​