src/JavaScript/DOM编程案例/获取下拉列表选中项的value.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value（省区联动）</title>
	</head>
	<body>
		<!-- 
			数据库表存储省份和市区的数据
			t_province
			code(pk)   name 
			----------------
			001       山东省
			002 	  山西省
			
			t_city
			-------------------------------------
			code(pk)		name 		pcode(fk) 外键
			1   			济南			  001
			2  				烟台			  001
			
			只要前端浏览器能够获取到山东省的code，假设code = 001
			那么后台java程序执行sql语句的时候这样执行：
				select * from t_city where pcode = ?;(?是sql中的占位符)
				ps.setString(1,"001");
			
		 -->
		 <!-- 这里的this代表当前的下拉列表对象-->
		 <!-- this代表当前下拉列表对象，this.value获取value属性值-->
		<select id="province" onchange="alert(this.value)">
			<option value ="">请选择省份</option>
			<option value ="001">山东省</option>
			<option value ="002">河北省</option>
			<option value ="003">湖北省</option>
		</select>
		
		
		<script type="text/javascript">
			window.onload = function(){
				// 给 province2 绑定onchange事件
				document.getElementById("province2").onchange = function(){
					// 这里的this代表就是当前发生change事件的这个节点对象
					// console.log(this.value);
					console.log(document.getElementById("province2").value);
				}
			}
		</script>
		<select id="province2">
			<option value ="">请选择省份</option>
			<option value ="001">山东省</option>
			<option value ="002">河北省</option>
			<option value ="003">湖北省</option>
		</select>
	</body>
</html>