下拉式值不会'不适用

Drop down values doesn't apply

本文关键字：不适用      更新时间：2023-09-26

all假设我有这样一个代码

<!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？但我不明白它是怎么工作的。。。感谢

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

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

把你的脚本放在文档的末尾。

您需要添加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事件来确保元素存在。

您的代码

 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>
相关文章：