選擇的價值 <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);
});