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

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

效果展示

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

知识串讲

1、基于select标签实现（最简单）

<select id="select_type" style="font-weight:700"><option>请选择搜索类型</option><option>网络IP</option><option>地址</option><option>责任人</option>
</select>

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

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

<script>(function(){$('input[id="search"]').on('click', function(){var content = document.getElementById("search_content").value;var select_type = document.getElementById("select_type").value;var data = {"search_content":content};$.ajax({type: "get",url: "/",data: data,dataType: "json",success:window.location.href="search_result/"+select_type+'/'+content});});})();
</script>

2、基于a标签实现

<ul class="nav"><a href="#" id="select_type2">请输入搜索类型</a><ul class="plat"><li><a href="#" onclick="selectfuction('网络IP')">网络IP</a></li><li><a href="#" onclick="selectfuction('地址')">地址</a></li><li><a href="#" onclick="selectfuction('责任人')">责任人</a></li></ul>
</ul>

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

然后对应的script方法（功能：在点击选项后，将选项结果进行展示）如下：

<script>function selectfuction(args){var type = document.getElementById("select_type2");type.innerHTML = args}
</script>

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

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

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

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

<style>*{padding: 0;margin: 0;}ul,a{font-size: 20px;list-style: none;text-decoration: none;background-color: #3C3C3C;color: #FFFFFF;width: 100px;text-align: center;border: 0px solid black;border-radius: 5px;margin-top: 1px;}a{display: block;}.plat{display: none;}.nav{float: left;margin-left: 1px;}.nav:hover .plat{display: block;clear: both;}.plat li:hover>a{background-color: dimgrey;}
</style>

示例代码

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

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