如何在HTML中不使用onChange()而在JavaScript中传递值

Question

我知道这是一个简单的问题。但我找不到克服这个问题的方法。我只想要这个。我有一个使用selectelement&当用户从下拉列表中选择一个城市时，它应该能够将所选的值传递给控制台(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>

Answer 2

请看一下这把小提琴：Fiddle

const selectCites = document.getElementById("city-selection");
selectCites.addEventListener("change", function(e) {
e.preventDefault();
const { srcElement } = e;
const { selectedOptions } = srcElement;
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})

基本上，我在select上添加了一个事件侦听器，等待任何更改，然后在有多个选项的情况下循环使用selectedOptions。

Answer 3

只需添加EventListener即可侦听change-事件：

document.addEventListener("change", function() {
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
}

Answer 4

您可以注册一个外部事件侦听器来响应change事件，如下所示：

document.querySelector('select[name="city"]').addEventListener('change',function(e){
console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});

<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>

Answer 5

您不能使用目标属性。像这样：

const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
console.log(e.target.value)
});

Answer 6

几乎已经给出了所有最好的替代方案，您可以使用纯javascript或jquery

假设这是坦桑尼亚城市的HTML代码：

<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="dar">Dar es Salaam </option>
<option value="mbeya">Mbeya</option>
<option value="mwanza">Mwanza</option>
<option value="dodoma">Dodoma</option>
<option value="arusha">Arusha</option>
<option value="morogoro">Morogoro</option>
<option value="tanga">Tanga</option>
<option value="zanzibar">Zanzibar City</option>
<option value="kigoma">Kigoma</option>
</select>

因此，您的纯javascript可以是：

document.getElementById('city-selection').addEventListener('change', function() {
let selectedCity = this.value;
console.log(selectedCity);
});

Jquery：

$('#city-selection').on('change', function() {
let selectedCity = $(this).val();
//let selectedCity = this.value; this will also do the same 
//as the above declaration format
console.log(selectedCity);
});

我希望这能对你有所帮助