时间戳

首页 > 解决方案 > 为什么我的默认下拉选项在选择其他选项时会消失？

javascript - 为什么我的默认下拉选项在选择其他选项时会消失？

问题描述

这是一个 GIF 来说明我的意思。

我该如何解决这个问题，所以当我选择一个选项时，下拉菜单上会显示默认选项“正在观看”？

这是直接的codepen链接

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--------------------------------------------------------------------------------------->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <title>App</title>
    </head>
        <body class="bg-ttgl">
            <div class="container">
            <form class="form-group">
                <div class="search-row row justify-content-center">
                    <!--dropdown section-->
                    <div class="col-7 input-group-prepend">
                      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item">Completed</a>
                        <a class="dropdown-item">On-Hold</a>
                        <a class="dropdown-item">Dropped</a>
                        <a class="dropdown-item">Plan to Watch</a>
                      </div>
                    <!--search field section-->
                    <input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
                    <div class="input-group-append" id="button-addon4">
                    <button class="btn btn-light btn-outline-secondary" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                    </div>
                    </div>
                </div>
            </form>
            </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>$(".dropdown-menu a").click(function () {           
        $("button.dropdown-toggle").text($(this).text());
      });
    </script>
        </body>
</html>

标签： javascripthtmljquerybootstrap-4

解决方案

那是因为 'Watching' 作为dropdown-item. 只需添加<a class="dropdown-item">Completed</a>到下拉菜单列表中。

例如

<div class="dropdown-menu" role="menu">
   <a class="dropdown-item">Watching</a> // Here
   <a class="dropdown-item">Completed</a>
   <a class="dropdown-item">On-Hold</a>
   <a class="dropdown-item">Dropped</a>
   <a class="dropdown-item">Plan to Watch</a>
</div>

推荐阅读