當用戶從表單控件中選擇選項時如何調用函數

Question

我將如何做到這一點，以便當我選擇一年時，立即執行一個函數。 我不想包含按鈕，我希望代碼在選擇日期后立即執行。 我正在使用 HTML、JavaScript 和 bootstrap 5

謝謝你。

 function onSelect() { console.log('Hello World!'); }

 <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <select id="inputYear" class="form-control"> <option value="2022">2022</option> <option value="2021">2021</option> <option value="2020">2020</option> <option value="2019">2019</option> <option value="2018">2018</option> </select>

Answer 1

與處理按鈕按下的方式類似（將事件偵聽器分配給button的“click”事件），您將事件偵聽器分配給select的“change”事件。

 function onSelect(event) { console.log('You picked ' + event.target.value); } document.querySelector("#inputYear").addEventListener("change", onSelect);

 <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <select id="inputYear" class="form-control"> <option value="2022">2022</option> <option value="2021">2021</option> <option value="2020">2020</option> <option value="2019">2019</option> <option value="2018">2018</option> </select>