select <select> 标签的值与 onchange(this.value)

Question

我试图在每次更改时获取选择的值，我试图将它记录到我的 javascript 中的控制台，但它不起作用，这是问题中的一些代码...我是编程新手请保持简单的答案...谢谢

function add(x) {
    var selection = x;
    console.log(x);
}

<select class="seletion" onchange="add(this.value)">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
                <option value="e">E</option>
                <option value="f">F</option>
                <option value="g">G</option>
                <option value="h">H</option>
                <option value="i">I</option>
                <option value="j">J</option>
                <option value="k">K</option>
                <option value="l">L</option>
                <option value="m">M</option>
                <option value="n">N</option>
                <option value="o">O</option>
                <option value="p">P</option>
                <option value="q">Q</option>
                <option value="r">R</option>
                <option value="s">S</option>
                <option value="t">T</option>
                <option value="u">U</option>
                <option value="v">V</option>
                <option value="w">W</option>
                <option value="x">X</option>
                <option value="y">Y</option>
            </select>

Answer 1

试试这个：你的代码对我来说看起来不错，但不知何故函数名称 add 不起作用，一旦我更改函数名称它开始工作，请参阅工作片段

function showSelection(x) {
  alert(x);
}

    <select class="seletion" onchange="showSelection(this.value);">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                    <option value="d">D</option>
                    <option value="e">E</option>
                    <option value="f">F</option>
                    <option value="g">G</option>
                    <option value="h">H</option>
                    <option value="i">I</option>
                    <option value="j">J</option>
                    <option value="k">K</option>
                    <option value="l">L</option>
                    <option value="m">M</option>
                    <option value="n">N</option>
                    <option value="o">O</option>
                    <option value="p">P</option>
                    <option value="q">Q</option>
                    <option value="r">R</option>
                    <option value="s">S</option>
                    <option value="t">T</option>
                    <option value="u">U</option>
                    <option value="v">V</option>
                    <option value="w">W</option>
                    <option value="x">X</option>
                    <option value="y">Y</option>
                </select>

Answer 2

这是一个更可靠的解决方案

function addsel() {
    var selection = document.getElementById("sel1").value;
    console.log(selection);
}

<select id="sel1" class="seletion" onchange="addsel()">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
                <option value="e">E</option>
                <option value="f">F</option>
                <option value="g">G</option>
                <option value="h">H</option>
                <option value="i">I</option>
                <option value="j">J</option>
                <option value="k">K</option>
                <option value="l">L</option>
                <option value="m">M</option>
                <option value="n">N</option>
                <option value="o">O</option>
                <option value="p">P</option>
                <option value="q">Q</option>
                <option value="r">R</option>
                <option value="s">S</option>
                <option value="t">T</option>
                <option value="u">U</option>
                <option value="v">V</option>
                <option value="w">W</option>
                <option value="x">X</option>
                <option value="y">Y</option>
            </select>

Answer 3

使用内联事件处理程序并不总是最好的主意。为什么不尝试使用 DOM API 来处理这种情况？

删除 <select> 中的 'onchange' 处理程序然后将以下内容添加到您的 JS 脚本

document.getElementsByClassName('seletion')[0].addEventListener('change', function(){      
  console.log(this.value);
});

Answer 4

答案更新

阅读HTMLSelectElement可以看到一个方法：

add() Adds an element to the collection of option elements for this select element.

这是调用的函数，不是你的函数。

确实，您可以在以下示例中看到这一点：

var opt1 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";

function add (x) {
  var selection = x;
  console.log(x);
}

<select class="seletion" onchange="add(opt1);console.log('New option added at the end')">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>

你的函数名 add 被认为是与 JS 不同的函数。

更改其名称，例如，将其更改为 add1 或将其作为附加到 window 对象的全局函数调用：

function add1(x) {
  var selection = x;
  console.log('add1: ' + x);
}

function add(x) {
  var selection = x;
  console.log('window.add: ' + x);
}

<select class="seletion" onchange="add1(this.value);">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>



<select class="seletion" onchange="window.add(this.value);">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>

select <select> 标签的值与 onchange(this.value)

select value of <select> tags with the onchange(this.value)

html

javascript

onchange