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>
    
  • 相关阅读:
    Nginx负载均衡配置实例详解
    Tomcat服务器
    如何设计安全的用户登录功能
    Tomcat 配置用户认证服务供C#客户端调用
    DataWindow值获取
    弹出上下文菜单
    DataWindow快速从Grid格式转为Freefrom
    postEvent() @ triggerEvent
    日期赋值为: 0000:00:00
    截取字符串
  • 原文地址:https://www.cnblogs.com/huclouy/p/6523443.html
Copyright © 2011-2022 走看看