【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

 

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