【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

 

作者：華爲雲特約供稿開發者  鵬哥賊優秀