【Python成长之路】从零做网站开发 -- 下拉选择项的实现

上次的搜索功能,有粉丝提到,能不能设置成可选的搜索条件。答案自然是可以的,所以我就又在上上周的基础上添加了下拉选

效果展示

这里我基于select标签和a标签的两种方式,实现了下拉项的功能。

【Python成长之路】从零做网站开发 -- 下拉选择项的实现_第1张图片

知识串讲

1、基于select标签实现(最简单)

这种方式是比较常见的下拉项实现方式,在获取选择框内容是通过document.getElementById("select_type").value来实现。

然后将搜索类型type和内容content作为参数传给后台。这里我还是通过window.location.href来重定位到新界面。

2、基于a标签实现

这里用a标签实现每个选项超链接的功能,可以实现每个按钮跳转到新url的功能。但我这边不需要,因此设置了href='#'。至于ul标签为什么要设置class,主要是为了格式好看些,后面再讲。

然后对应的script方法(功能:在点击选项后,将选项结果进行展示)如下:

相应在获取选择框内容是通过type.innerText来实现的。这里要注意,不是通过type.value,那样是获取不到“网络IP”等值的。

如果你只是这样简单地实现功能,界面展示会比较丑,如下:

【Python成长之路】从零做网站开发 -- 下拉选择项的实现_第2张图片

在点击选项后其他选项仍然展示界面上,给人感觉很快,因此通过对ul标签进行display设置。以下style格式参考:

https://blog.csdn.net/qq_28919991/article/details/82860218


    

示例代码

示例代码基本和上次的没差异,只是新增了下拉选项的功能。因此对于需要的同学,可以自己修改;也可以直接从github上下载:https://github.com/yuzipeng05/flask_test.git

 

作者:华为云特约供稿开发者  鹏哥贼优秀

 

 

你可能感兴趣的:(技术交流)