如何在 HTML 但在 JavaScript 中不使用 onChange() 来传递值？

Question

我知道这是一个简单的问题。但是我找不到解决这个问题的方法。我想要的就是这个。我有一个使用 select 元素创建的下拉菜单，当用户 select 从该下拉菜单中选择一个城市时，它应该能够传递 selected 值到控制台 ( console.log() )。但我只能传递第一个 selected 值。我找到了一种使用 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

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

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

Answer 2

您可以像这样注册一个外部事件侦听器来响应 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 3

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

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

Answer 4

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 5

请看一下这个fiddle： 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 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);
         });

希望对您有所帮助

如何在 HTML 但在 JavaScript 中不使用 onChange() 来传递值？

How to pass values without using onChange() in HTML but in JavaScript?

javascript

html

onchange

HTML

JS

HTML代码

JS代码