【Python成长之路】从 零做网站开发 -- 下拉选择项的实现
哈喽大家好，我是鹏哥。
今天继续之前的html组件开发话题是 —— 下拉选择项。
~~~上课铃~~~
卡农变奏曲K.Williams - 终极钢琴测试王
1
写在前面
上次的搜索功能，有粉丝提到，能不能设置成可选的搜索条件。答案自然是可以的，所以我就又在上上周的基础上添加了下拉选项的功能。
另外应小伙伴要求，本周将背景音乐设置为这首卡农变奏曲，不知道还 有其他人喜欢吗？
2
效果展示
这里我基于select标签和a标签的两种方式，实现了下拉项的功能。
3
知识串讲（敲黑板啦）
1、基于select标签实现（最简单）
这种方式是比较常见的下拉项实现方式，在获取选择框内容是通过document.getElementById("select_type").value来实现。
然后将搜索类型type和内容content作为参数传给后台。这里我还是通过window.location.href来重定位到新界面。
2、基于a标签实现
请输入搜索类型网络IP 地址 责任人
这里用a标签实现每个选项超链接的功能，可以实现每个按钮跳转到新url的功能。但我这边不需要，因此设置了href='#'。至于ul标签为什么要设置class，主要是为了格式好看些，后面再讲。
然后对应的script方法（功能：在点击选项后，将选项结果进行展示）如下：
相应在获取选择框内容是通过type.innerText来实现的。这里要注意，不是通过type.value，那样是获取不到“网络IP”等值的。
如果你只是这样简单地实现功能，界面展示会比较丑，如下：
在点击选项后其他选项仍然展示界面上，给人感觉很快，因此通过对ul标签进行display设置。以下style格式参考：
https://blog.csdn.net/qq_28919991/article/details/82860218
4
示例代码
示例代码基本和上次的没差异，只是新增了下拉选项的功能。因此对于需要的同学，可以自己修改；也可以直接从github上下载：https://github.com/yuzipeng05/flask_test.git
5
无关风月，无关代码
【网络歌曲巅峰榜】海底 - cococola音乐推 - 网络歌曲巅峰榜
“夏夜的歌声，冬至的歌声，都从水面掠过，皱起一层波纹，像天空坠落的泪水，又归于天空。人们随口说的一句话，跌落墙角，风吹不走，阳光烧不掉，独自沉眠。” 扉页起时，不见云边颜色；雨落暮时，心湖凉风鳞动 ，微凉。结局突然的高潮和凄凉，让我很是坐不住，只能回家平复心绪。应是寻常巷陌下的家常，却道雾气弥漫，青山白首。四方食事，不过一碗人间烟火。听着海底，看着云边，书里没说完的话，又在歌里续唱。我真是要有多幸运才能在雨滴答着窗沿，风扇慢悠悠地转着时，刚好一个人听着这首歌，然后合上这本书，情绪和意境刚好在那个点上。
“山顶突破云层，生活未完待续。……一定跟得上。”
“散落的月光穿过了云，躲着人群。……灵魂没入寂静，无人将你吵醒。……别放弃！”
--张嘉佳《云边有个小卖部》
-- cococola《海底》
~~~下课铃~~~
【往期热门文章】：
【Python成长之路】10行代码教你免费观看无广告版的《庆余年》腾讯视频
【Python成长之路】如何用python开发自己的iphone应用程序，并添加至siri指令
【Python成长之路】从 零做网站开发 -- 基于Flask和JQuery，实现表格管理平台
点击下方诗句，可以留言互动喔
世界微尘里，吾宁爱与憎。
【关注“鹏哥贼优秀”公众号，回复“python学习材料”，将会有python基础学习、机器学习、数据挖掘、高级编程教程等100G视频资料，及100+份python相关电子书免费赠送!】
扫描二维码
与鹏哥一起
学python吧！
