使用所選選項更改跨度文本

Question

我正在開始編碼生活。 我正在嘗試使用選定的選項更改跨度中的文本，但它給了我值而不是文本。 例如，當我 select 總線選項時，我希望它顯示“總線”文本。 我不想要值數。 提前致謝。

 <select id="vehicles" onchange="showChange()"> <option value="1">Bus</option> <option value="2">Car</option> <option value="3">Plane</option> </select> <span id="vehicle"></span> <script> function showChange(){ var selected_vehicle = document.getElementById("vehicles").value; document.getElementById("vehicle").innerText = selected_vehicle; } </script>

Answer 1

您可以先this關鍵字傳遞給 function 然后使用selectedIndex選項獲取文本。

 <select id="vehicles" onchange="showChange(this)"> <option value="1">Bus</option> <option value="2">Car</option> <option value="3">Plane</option> </select> <span id="vehicle"></span> <script> function showChange(el){ var selected_vehicle = el.options[el.selectedIndex].text; document.getElementById("vehicle").innerText = selected_vehicle; } </script>

Answer 2

如果您保留 HTML 中的內聯聲明（通常是首選方法），您可以在單獨的文件中分配您的事件處理程序。 另外，請注意 - 如果您以傳統方式提交表單數據（而不是使用 AJAX 等），那么select元素需要一個名稱 - ID 不會出現在 REQUEST 數組中！

 document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{ e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ') })

 <select name='vehicles'> <option selected hidden disabled>Select mode of transport <option value='1'>Bus <option value='2'>Car <option value='3'>Plane </select> <span id='vehicle'></span>