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

 

哈喽大家好，我是鹏哥。

 

今天继续之前的html组件开发话题是 —— 下拉选择项。

 

~~~上课铃~~~

 

卡农变奏曲K.Williams - 终极钢琴测试王

1

写在前面

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

另外应小伙伴要求，本周将背景音乐设置为这首卡农变奏曲，不知道还 有其他人喜欢吗？

2

效果展示

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

3

知识串讲（敲黑板啦）

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>

 

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吧！