【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

 

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

 

 

展开阅读全文
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值