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
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南