选择的价值 <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

试试看：您的代码对我来说不错，但是以某种方式添加功能名称不起作用，一旦我更改了功能名称，它就开始起作用，请参见工作片段

 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

答案更新

从HTMLSelectElement读取，您可以看到一个方法：

add（）将元素添加到此select元素的option元素集合中。

这是调用的函数，而不是您的函数。

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

 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> 

Answer 3

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

 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 4

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

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

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