【Python成長之路】從零做網站開發 -- 下拉選擇項的實現

原創

鹏哥贼优秀

2020-07-08 06:35

哈嘍大家好，我是鵬哥。

今天繼續之前的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音樂推 - 網絡歌曲巔峯榜

“夏夜的歌聲，冬至的歌聲，都從水面掠過，皺起一層波紋，像天空墜落的淚水，又歸於天空。人們隨口說的一句話，跌落牆角，風吹不走，陽光燒不掉，獨自沉眠。” 扉頁起時，不見雲邊顏色；雨落暮時，心湖涼風鱗動，微涼。結局突然的高潮和淒涼，讓我很是坐不住，只能回家平復心緒。應是尋常巷陌下的家常，卻道霧氣瀰漫，青山白首。四方食事，不過一碗人間煙火。聽着海底，看着雲邊，書裏沒說完的話，又在歌裏續唱。我真是要有多幸運才能在雨滴答着窗沿，風扇慢悠悠地轉着時，剛好一個人聽着這首歌，然後合上這本書，情緒和意境剛好在那個點上。

“山頂突破雲層，生活未完待續。……一定跟得上。”

“散落的月光穿過了雲，躲着人羣。……靈魂沒入寂靜，無人將你吵醒。……別放棄！”