在 select 上显示选中的下拉项

Question

I have a bootstrap code for the search bar with a dropdown list but I want to display the option upon selection one from the dropdown list.我有一个带有下拉列表的搜索栏的引导代码，但我想在从下拉列表中选择一个时显示该选项。 Currently, it shows "All" and even you click on the dropdown and select any of the options it does not work.目前，它显示“全部”，即使您单击下拉列表和 select 任何选项都不起作用。 Anyone on it using JavaScript or jQuery to make it work使用 JavaScript 或 jQuery 使其工作的任何人

 <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Search Box With Dropdown List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <body> <div class="search-box col-md-5"> <form action=""> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Category One</a> <a class="dropdown-item" href="#">Category Two</a> <a class="dropdown-item" href="#">Category Three</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated Category</a> </div> </div> <input type="text" class="form-control" aria-label="Search input with dropdown button"> <div class="input-group-append"> <button class="btn btn-success" type="button">Search</button> </div> </div> </form> </div> </body> </html>

Answer 1

You could simple add click event on您可以简单地添加点击事件

dropdown-item

see below见下文

 $('.dropdown-menu.dropdown-item').click(function(){ var value = $(this).text(); console.log(value) // Update the value and show it to the user $(this).parent().parent().find(".dropdown-toggle").html(value); });

 <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Search Box With Dropdown List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <body> <div class="search-box col-md-5"> <form action=""> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Category One</a> <a class="dropdown-item" href="#">Category Two</a> <a class="dropdown-item" href="#">Category Three</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated Category</a> </div> </div> <input type="text" class="form-control" aria-label="Search input with dropdown button"> <div class="input-group-append"> <button class="btn btn-success" type="button">Search</button> </div> </div> </form> </div> </body> </html>

在 select 上显示选中的下拉项

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-29 09:49:30

在 select 上显示选中的下拉项

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-29 09:49:30

解决方案1
1 已采纳 2020-11-29 09:49:30