zoukankan      html  css  js  c++  java
  • js事件学习笔记1_onchange

    需求:实现一个简单的地址关联下拉选择框。

      1、通过id拿到select标签

        var city = document.getElementById("city");

      2、定义一个select.onchange匿名函数

      3、定义一个变量获取select标签里面的value

        var cy = city.value;

     4、通过switch循环判断这个变量cy是哪个值,进而进行相应的html代码替换。

      document.getElementById("area").innerHTML = "<option>xxx</option>"
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    	<title></title>
    		<style type="text/css">
    
    		</style>
    	</head>
    	<body>
    		<select id="city">
    			<option value="bj">北京</option>
    			<option value="tj">天津</option>
    			<option value="sh">上海</option>
    		</select>
    		<select id="area">
    			<option>海淀</option>
    			<option>朝阳</option>
    			<option>东城</option>
    		</select>
    	</body>
    	<script type="text/javascript">
    		var city = document.getElementById("city");
    		city.onchange = function(){              
    			var cy = city.value;
    			switch (cy) {
    			case "bj":
    				var area = document.getElementById("area");
    				area.innerHTML = "<option>海淀</option><option>朝阳</option><option>朝阳</option>";
    				break;
    			case "sh":
    				var area = document.getElementById("area");
    				area.innerHTML = "<option>浦东</option><option>杨浦</option><option>浦西</option>";
    				break;
    			case "tj":
    				var area = document.getElementById("area");
    				area.innerHTML = "<option>河西</option><option>安华</option><option>普洗</option>";
    				break;
    
    			default:
    				alert("error");
    			}
    		}
    		
    		
    		
    	</script>
    	
    </html>
    
  • 相关阅读:
    node.js 与java 的主要的区别是什么
    基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)
    Linux下SVN安装配置
    Linux查看CPU和内存使用情况
    Linux添加/删除用户和用户组
    java远程调试
    springboot和mybatis集成,自动生成model、mapper,增加mybatis分页功能
    客户端、服务端,跨域访问设置
    HTTP和HTTPS协议
    KMP算法代码
  • 原文地址:https://www.cnblogs.com/huclouy/p/6523443.html
Copyright © 2011-2022 走看看