下拉菜单案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script>
        window.onload=function()
        {
            var sele=document.getElementById("sele");   //下拉菜单事件，当改变的时候，事件
            sele.onchange=function()
            {
                switch(this.value)  //下拉菜单的值，this.value
                {
                    case "a":       // 要加引号,表单的值都是字符型
                        alert("1元");break;  
                    case "b":
                        alert("2元");break;
                    case "c":
                        alert("3元");break;
                    case "d":
                        alert("4元");break;
                    default:
                        alert("没有这个水果");
                }
            }
        }
    </script>
</head>
<body>
<select name="" id="sele">      <!--下拉菜单-->
    <option value="a">苹果</option>   <!--选项-->
    <option value="b">香蕉</option>
    <option value="c">哈密瓜</option>
    <option value="d">葡萄</option>
</select>
</body>
</html>