html如何定义下拉列表点击事件,代码说明如下

html如何定义下拉列表点击事件,代码说明如下,第1张

<html>

<head>

<meta charset="utf-8" />

<title>yu.html</title>

<!-- <script type="text/javascript" src="jquery-1.9.0.min.js"></script> -->

<script type="text/javascript">

window.onload = function ()

    {

    var sel = document.getElementsByName ('selectDropDown')[0]

    sel.onchange = function ()

    {

    var val = this.value

    switch (val)

    {

    case "0":

     alert(val)

    break

    case "-1":

     alert(val)

    break

    case "220":

     alert(val)

    break

    case "200":

     alert(val)

    break

    case "10":

     alert(val)

    break

    default:

     alert(val)

    break

    }

    }

    }

</script>

</head>

<body>

<form name="form" action="">

<select name="selectDropDown">

<option value="0">0

<option value="-1">-1

<option value="220">220

<option value="200">200

<option value="10">10

</select>

</form>

</body>

</html>

<select id="products" name="products" tabindex="10" >                    <option value=" " selected="selected" > </option>                    <option value="All">All</option>                    <option value="Music">Music</option>           <option value="Video">Videos</option>     </select>//改为:<select id="products" name="products" tabindex="10"  onchange="show(this.value)">                     <option value=" " selected="selected" > </option>                     <option value="All">All</option>                     <option value="1">Music</option>            <option value="2">Videos</option>      </select>//  onchange="show(this.value)" 三指当前元素改变时触发// 所以show(index) 中的参数值还有可能是all所以把js部分改为if (index == 1) {         document.getElementById("music").style.display="block"         document.getElementById("videos").style.display="none"     }     else if(index == 2) {         document.getElementById("music").style.display="none"         document.getElementById("vidoes").style.display="block"            }        else{document.getElementById("music").style.display="block"          document.getElementById("vidoes").style.display="block" }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8304416.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存