美文网首页
下拉菜单 一个选项一个事件

下拉菜单 一个选项一个事件

作者: 孜然味的啊 | 来源:发表于2020-05-29 21:31 被阅读0次

select option 下拉菜单         onchange触发事件

函数2:selectedIndex返回option索引号01234

改变id为show的src内容:更为 id=game的select  下option(index索引号)

<!-- edu_15_2_3.html -->

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

<title>下拉菜单</title>

<script language="javascript"> 

  function $(id){return document.getElementById(id);}//获取元素

  function changeImage(){ 

    var index =$("game").selectedIndex;//获取下拉框中选择项

    $("show").src=$("game").options[index].value;//更改图片

  }

</script>

</head>

  <body>

  <div align="center">

      <form>

<select id="game" onChange="changeImage()" >

<option value="pic4.jpg">--请选择--</option>

<option value="pic0.jpg">平板电视</option>

<option value="pic1.jpg">笔记本电脑</option>

<option value="pic2.jpg">单反相机</option>

<option value="pic3.jpg">智能手机</option>

</select>

      </form>

  </div>

  <p align="center">

        <img  src="pic4.jpg"  id="show">

  </p>

    </body>

</html>

相关文章

网友评论

      本文标题:下拉菜单 一个选项一个事件

      本文链接:https://www.haomeiwen.com/subject/cuzfzhtx.html