当用户从表单控件中选择选项时如何调用函数

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>