網頁

▼

2021/3/6

JavaScript DOM 將<select>下拉選單的值帶入下一個<input>欄位 take dropdown menu selected value to next input value

把<select>下拉選單(dropdown menu)選擇的值帶到下個<input>欄位的作法如下。

在頁面載入完成時及改變下拉選單的選項時取得element node的value屬性值然後用element.nextElementSibling取得下個element node即<input>並塞入其value屬性。

demo.html

<html>
<script>
function change(e) { // e is <select>
  e.nextElementSibling.value = e.value; // get <select> element value and set to next element's value
}
</script>
<body>

    <select id="select-action" onchange="change(this)">
        <option value="N">拒絕</option>
        <option value="Y">接受</option>
    </select>
    <input type="text">

</body>
<script>
window.onload = function() { // 頁面載入後執行
  let selectAction = document.getElementById("select-action"); // get <select> element
  change(selectAction);
};
</script>
</html>

工作中經常<input>會透過隱藏(type="hidden")來作為實際提交表單的值。


沒有留言:

張貼留言