Javascript

JS-DOM编程-06-获取下拉列表选中项的value

本文主要是介绍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>

这篇关于JS-DOM编程-06-获取下拉列表选中项的value的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航