onchange 不适用于下拉菜单？答案

【问题标题】：onchange not working for drop down menu?onchange 不适用于下拉菜单？
【发布时间】：2013-12-16 09:26:16
【问题描述】：

我正在努力做到这一点，以便当从我的下拉菜单中进行选择时，文本将相应地显示在我的文本区域内，现在我一直试图让其中一个工作。

问题：它不会显示文本区域内数组中的字符串。这段代码有问题吗？

下拉菜单：

<select id="dropdown" onchange="getFrames();">
    <option value="1" selected="selected"> Blank </option>
    <option value="2"> Exercise </option>
    <option value="3"> Juggler </option>
    <option value="4"> Bike </option>
    <option value="5"> Dive </option>
</select>

文本区域：

<textarea id="textstage" rows="80" cols="20"> </textarea>

JavaScript：

我有这些全局变量。

var theStage = document.getElementById("textstage");
var getDrop = document.getElementById("dropdown");

然后我就有了这个功能。

function getFrames(){
    var dropSel = getDrop.options[getDrop.selectedIndex].value;

    if(dropSel === 2){
        theStage.value = ANIMATIONS["Exercise"];
}

被引用的数组是来自另一个 js 文件的全局数组。

【问题讨论】：

控件是否进入 getFrames 方法？我的意思是，您是否尝试在该方法中发出警报并检查事件是否被触发？
当我在与 if(dropSel === 2){ 相同的部分实现警报时，当我在下拉菜单中将所选选项更改为行使时，不会发生警报。
@Corjava 您在控制台中看到任何错误吗？
出现错误。关闭方法
@harsha 嗯，这是一个问题，但我刚刚关闭它，它仍然没有工作。

标签： javascript html

【解决方案1】：

试试：

var theStage,getDrop; 

function getFrames() {
    var dropSel = getDrop.options[getDrop.selectedIndex].innerHTML;//+getDrop.value;
    theStage.value = ANIMATIONS[dropSel];

}

//Place the selection part on load callback
window.onload = function () {
    theStage = document.getElementById("textstage");
    getDrop = document.getElementById("dropdown");
}

Demo

您可以只使用getDrop.value 而不是使用getDrop.options[getDrop.selectedIndex].value。
=== 是严格的相等比较，意思是 "2" === 2 在你的情况下会是假的。
似乎您正在寻找选项文本来查找基于此作为对象动画中的键的值。所以你可以做getDrop.options[getDrop.selectedIndex].innerHTML
您的文档选择代码应位于 window.onload 内或 html 中的元素之后

【讨论】：

【解决方案2】：

我通过省略内联事件处理程序对您的 html 进行了细微更改，而是将其添加到 javascript。

html：

<select id="dropdown">
    <option value="1" selected="selected"> Blank </option>
    <option value="2"> Exercise </option>
    <option value="3"> Juggler </option>
    <option value="4"> Bike </option>
    <option value="5"> Dive </option>
</select>
<textarea id="textstage" rows="80" cols="20"> </textarea>

此外，在 javascript 中，我去掉了严格相等 (===) 并使其成为 (==)。

javascript:

var theStage = document.getElementById("textstage");
var getDrop = document.getElementById("dropdown");
getDrop.addEventListener("change",getFrames);
function getFrames(){
   var dropSel = getDrop.options[getDrop.selectedIndex].value;
    if(dropSel == 2){
      theStage.value = ANIMATIONS["Exercise"];
    }
}

希望它现在对你有用。

【讨论】：