使用onchange选择<select>标签的值(this.value)

时间:2016-12-30 17:21:50

标签: javascript html onchange

我试图在每次更改时获取选择的值,我尝试在我的javascript中将其记录到控制台但它不起作用,这是问题中的一些代码...我是新手编程请保持答案简单...谢谢 &#13; &#13; function add(x){&#13;     var selection = x;&#13;     的console.log(X);&#13; }&#13; &lt; select class =&#34; seletion&#34;平变化=&#34;添加(THIS.VALUE)&#34;&GT;&#13;                 &lt; option value =&#34; a&#34;&gt; A&lt; / option&gt;&#13;                 &lt; option value =&#34; b&#34;&gt; B&lt; / option&gt;&#13;                 &lt; option value =&#34; c&#34;&gt; C&lt; / option&gt;&#13;                 &lt; option value =&#34; d&#34;&gt; D&lt; / option&gt;&#13;                 &lt; option value =&#34; e&#34;&gt; E&lt; / option&gt;&#13;                 &lt; option value =&#34; f&#34;&gt; F&lt; / option&gt;&#13;                 &lt; option value =&#34; g&#34;&gt; G&lt; / option&gt;&#13;                 &lt; option value =&#34; h&#34;&gt; H&lt; / option&gt;&#13;                 &lt; option value =&#34; i&#34;&gt; I&lt; / option&gt;&#13;                 &lt; option value =&#34; j&#34;&gt; J&lt; / option&gt;&#13;                 &lt; option value =&#34; k&#34;&gt; K&lt; / option&gt;&#13;                 &lt; option value =&#34; l&#34;&gt; L&lt; / option&gt;&#13;                 &lt; option value =&#34; m&#34;&gt; M&lt; / option&gt;&#13;                 &lt; option value =&#34; n&#34;&gt; N&lt; / option&gt;&#13;                 &lt; option value =&#34; o&#34;&gt; O&lt; / option&gt;&#13;                 &lt; option value =&#34; p&#34;&gt; P&lt; / option&gt;&#13;                 &lt; option value =&#34; q&#34;&gt; Q&lt; / option&gt;&#13;                 &lt; option value =&#34; r&#34;&gt; R&lt; / option&gt;&#13;                 &lt; option value =&#34; s&#34;&gt; S&lt; / option&gt;&#13;                 &lt; option value =&#34; t&#34;&gt; T&lt; / option&gt;&#13;                 &lt; option value =&#34; u&#34;&gt; U&lt; / option&gt;&#13;                 &lt; option value =&#34; v&#34;&gt; V&lt; / option&gt;&#13;                 &lt; option value =&#34; w&#34;&gt; W&lt; / option&gt;&#13;                 &lt; option value =&#34; x&#34;&gt; X&lt; / option&gt;&#13;                 &lt; option value =&#34; y&#34;&gt; Y&lt; / option&gt;&#13;             &LT; /选择&GT;&#13; &#13; &#13;

4 个答案:

答案 0 :(得分:2)

试试这个:你的代码看起来不错,但不知何故,函数名称添加不起作用,一旦我更改它开始工作的函数名称,请参阅工作代码段

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>

答案 1 :(得分:2)

ANSWER UPDATE

HTMLSelectElement读取,您可以看到一种方法:

  

add()将元素添加到此select元素的选项元素集合中。

这是被调用的函数而不是你的函数。

确实,您可以在以下示例中看到这一点:

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

function add (x) {
  var selection = x;
  console.log(x);
}
&#13;
<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>
&#13;
&#13;
&#13;

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

将其名称更改为add1或将其称为附加到窗口对象的全局函数:

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

function add(x) {
  var selection = x;
  console.log('window.add: ' + x);
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

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

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>

答案 3 :(得分:1)

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

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

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