javascript - 如何在 HTML 中而不是在 JavaScript 中使用 onChange() 来传递值？

Question

我知道这是一个简单的问题。但我找不到解决这个问题的方法。我想要的就是这个。我有一个使用 select 元素创建的下拉列表，当用户从该下拉列表中选择城市时，它应该能够将该所选值传递到控制台( console.log() )。但我只能传递第一个选定的值。我找到了一种使用 onChange() 和 select 元素将值传递到控制台的方法，如下代码所示。

HTML

<select id="comboA" onchange="getComboA(this)">
    <option value="">Select combo</option>
    <option value="Value1">Text1</option>
    <option value="Value2">Text2</option>
    <option value="Value3">Text3</option>
</select>

JS

function getComboA(selectObject) {
    var value = selectObject.value;  
    console.log(value);
}

但就我而言，整个过程需要编写代码，而不需要在 HTML 中使用 onChange()。因为我必须从 WordPress 表单获取用户输入，并且需要从表单中创建单独的 JS 文件。因此，我无法添加或更改表单的 HTML 代码。我的代码如下。

HTML 代码

---

<select name="city" class="city" id="city-selection">
    <option selected="selected" value="">Select City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <option value="City 4">City 4</option>
    <option value="City 5">City 5</option>
    <option value="City 6">City 6</option>
    <option value="City 7">City 7</option>
</select>

我使用的JS代码如下。

JS代码

---

var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);

请帮我解决这个问题。

Answer 1

const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
  console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);

<select name="city" class="city" id="city-selection">
    <option selected="selected" value="">Select City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <option value="City 4">City 4</option>
    <option value="City 5">City 5</option>
    <option value="City 6">City 6</option>
    <option value="City 7">City 7</option>
</select>