JS-DOM编程-06-获取下拉列表选中项的value
JS-DOM编程-06-获取下拉列表选中项的value
1.用户选择城市后，界面弹出对应市区原理
直辖市和市辖区的关系是：1对多(两张表，多的表加外键)
直辖市表t_city
id ccode(unique) cname
-----------------------------
1 001 北京
2 002 上海
3 003 广州
市辖区t_md
id mcode mname ccode(fk)
-----------------------------------------
1 100 东城区 001
2 101 西城区 001
3 102 朝阳区 001
3 102 大兴区 001
当用户选择任意一个市，比如说北京市，那么必须获取到北京市的所对应的ccode：001。
然后浏览器将001发送到服务器，服务器底层执行一条sql语句：
select * from t_md where ccode = '001';
返回一个list集合，List< Md> mdList;
mdList响应浏览器，浏览器解析mdList集合，转换成一个新的市辖区下拉列表，展示给用户。
这里我们只需要做到获取下拉列表选中项的value。
1.第一种方式：通过事件句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<!-- 方式1：通过事件句柄 -->
<!-- change事件，当value改变时发生 -->
<select onchange="alert(this.value)">
<option value="">请选择下列城市</option>
<option value="001">北京</option>
<option value="002">上海</option>
<option value="003">广州</option>
</select>
</body>
</html>
2.第二种方式：通过内部JS代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<!-- 方式2： 通过js代码块方式 -->
<script type="text/javascript">
window.onload = function() {
//获取下拉列表对象
var cityListElt = document.getElementById("cityList");
//设置change事件，当value改变时，获取value
cityListElt.onchange = function() {
alert(cityListElt.value);
}
}
</script>
<select id="cityList">
<option value="">请选择下列城市</option>
<option value="001">北京</option>
<option value="002">上海</option>
<option value="003">广州</option>
</select>
</body>
</html>
