0

假设我有这样的代码

<!DOCTYPE html>
    <html>
    <head>
     </head>
     <body>
    <script type="text/javascript" charset="utf-8">


    var figure = document.getElementById("tool");
    var selected = figure.options[figure.selectedIndex].value;


    if(selected === "pencil"){ 
    alert("Like a pencil");
}

if(selected === 'line'){
alert("Just drag and drop");
}
if(selected === "rect"){ 
    alert("drag and drop for rect");
}
    </script>


    <p><label>Drawing tool: <select id="tool">
        <option value="pencil">Pencil</option>
        <option value="rect">Rectangle</option>
        <option value="line">Line</option>
    </select></label></p>

</body>
</html>

为什么，当我更改下拉列表的值时它没有反应？也许我应该添加 OnChange？但我不明白它是如何工作的......谢谢

4

3 回答 3

1

您需要将该代码放入事件侦听器中，例如：

figure.addEventListener('change', function(){    
  // your code...   
});

并将您的脚本放在文档的末尾。

于 2013-05-16T20:09:41.477 回答
0

您需要添加 en事件处理程序。您当前的代码仅在页面加载时运行一次。

window.onload(function() {
   document.getElementById("tool").addEventListener('change',toolChangeEventHandler);
}

function toolChangeEventHandler() {
    if(this.value === "pencil"){ 
        alert("Like a pencil");
    } else if(this.value === "line"){
        alert("Just drag and drop");
    } else if(this.value === "rect"){ 
        alert("drag and drop for rect");
    }
}

当您尝试添加事件侦听器时，需要 onload 事件来确保元素存在。

于 2013-05-16T20:12:40.217 回答
0

你的代码

 var figure = document.getElementById("tool");
    var selected = figure.options[figure.selectedIndex].value;


    if(selected === "pencil"){ 
    alert("Like a pencil");
}

if(selected === 'line'){
alert("Just drag and drop");
}
if(selected === "rect"){ 
    alert("drag and drop for rect");
}

在页面加载时执行。要在选择更改时执行此代码，您可以使用上面的事件侦听器（所有浏览器中的方法都不相同）或像这样设置回调（对于单个事件更简单）：

<select id="tool" onchange="onSelectChange(this);">...

其中 onSelectChange 是这样的函数：

<script type="text/javascript">
    var onSelectChange = function(elt) {
        var selected = elt.options[elt.selectedIndex].value;

        if(selected === "pencil"){ 
            alert("Like a pencil");
        }
        if(selected === 'line'){
            alert("Just drag and drop");
        }
        if(selected === "rect"){ 
            alert("drag and drop for rect");
        }
    };
</script>
于 2013-05-16T20:19:41.760 回答