Javascript 下拉值不为'；不适用_Javascript_Drop Down Menu

Javascript 下拉值不为'；不适用

javascript drop-down-menu

Javascript 下拉值不为'；不适用,javascript,drop-down-menu,Javascript,Drop Down Menu,全部假设我有这样一个代码 <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript" charset="utf-8"> var figure = document.getElementById("tool"); var selected = figure.options

全部假设我有这样一个代码

<!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>


var figure=document.getElementById（“工具”）；
var selected=figure.options[figure.selectedIndex].value；
如果（选中==“铅笔”）{
警惕（“像铅笔”）；
}
如果（选定=='行'）{
警惕（“只需拖放”）；
}
如果（所选==“rect”）{
警报（“针对rect的拖放”）；
}
绘图工具：
铅笔
矩形
线

为什么，当我改变droplist的值时，它不会反应？也许我应该再加一次？但我不知道它是怎么工作的。。。

谢谢

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

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更改时执行此代码，可以使用如上所述的事件侦听器（方法在所有浏览器中都不相同），或者像这样设置回调（对于单个事件更简单）：

。。。

其中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>


var onSelectChange=功能（elt）{
所选变量=elt.options[elt.selectedIndex].value；
如果（选中==“铅笔”）{
警惕（“像铅笔”）；
}
如果（选定=='行'）{
警惕（“只需拖放”）；
}
如果（所选==“rect”）{
警报（“针对rect的拖放”）；
}
};

页面加载时，代码执行一次。您需要查看事件处理程序，特别是侦听案例中的

change

事件。

<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>