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

2021/8/7 17:35:50

本文主要是介绍JS-DOM编程-06-获取下拉列表选中项的value,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

1.用户选择城市后,界面弹出对应市区原理

直辖市和市辖区的关系是:1对多(两张表,多的表加外键)

直辖市表t_city

1
2
3
4
5
id  ccode(unique)   cname
-----------------------------
1   001     北京
2   002     上海
3   003     广州

市辖区t_md

1
2
3
4
5
6
id  mcode   mname   ccode(fk)
-----------------------------------------
1   100 东城区 001
2   101 西城区 001
3   102 朝阳区 001
3   102 大兴区 001

当用户选择任意一个市,比如说北京市,那么必须获取到北京市的所对应的ccode:001。

然后浏览器将001发送到服务器,服务器底层执行一条sql语句:

1
select * from t_md where ccode = '001';

返回一个list集合,List< Md> mdList;

mdList响应浏览器,浏览器解析mdList集合,转换成一个新的市辖区下拉列表,展示给用户。

这里我们只需要做到获取下拉列表选中项的value。

1.第一种方式:通过事件句柄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


原文链接: https://www.cnblogs.com/TSCCG/p/15112471.html
扫一扫关注最新编程教程