All geek questions in one place

The value of the drop-down list has changed by clicking only once, why?

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Toy</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Household</a></li>
        <li><a href="#">Instrument</a></li>
          </ul>
        </li>
  </div>
</div>

<script>
$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".dropdown:first-child").text($(this).text());
      $(".dropdown:first-child").val($(this).text());

   });

});
</script>

</body>
</html>

When I select a value from the drop-down menu, the drop-down name changes the menu (for example, Fabric, Toy, Furniture, etc.). But after that, the dropdown menu disappeared. Why?

+4
source share
2 answers

because this line $(".dropdown:first-child").text($(this).text());means that you want to change the contents of the entire menu .dropdownto the text of the clicked item, change the selector to select the correct item, which is .dropdown-toggleas follows:

$(function() {

  $(".dropdown-menu li a").click(function() {
    $(".dropdown-toggle").text($(this).text());
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Cloth</a></li>
    <li><a href="#">Toy</a></li>
    <li><a href="#">Furniture</a></li>
    <li><a href="#">Gift</a></li>
    <li><a href="#">Household</a></li>
    <li><a href="#">Instrument</a></li>
  </ul>
</li>
Run codeHide result
+5
source

First of all, <li>outside <ul>(or <ol>) is unacceptable. li- an element of the list; it must not exist outside the list.

$(".dropdown:first-child") .dropdown ( INSIDE it). , <li>. , . $(".dropdown-toggle").

, :

  • caching $( ". dropdown-toggle" ) DOM jQuery ,

  • e.currentTarget.innerText jQuery $(this).text()

.

const $dropdownToggle = $(".dropdown-toggle")

$(".dropdown-menu li a").click(e => $dropdownToggle.text(e.currentTarget.innerText))
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span>
</a>
  <ul class="dropdown-menu">
    <li><a href="#">Cloth</a></li>
    <li><a href="#">Toy</a></li>
    <li><a href="#">Furniture</a></li>
    <li><a href="#">Gift</a></li>
    <li><a href="#">Household</a></li>
    <li><a href="#">Instrument</a></li>
  </ul>
</div>
Hide result
+3

Source: https://habr.com/ru/post/1696251/

More articles:


All Articles