CODEWITHSUNDEEP
javascriptdrop-down-menu
user9644880
user9644880

Reputation:

Dropdown value changed by click only one time 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 the value from the drop down menu drop down title is changed by the menu(e.g.,Cloth,Toy,Furniture,etc). But, after that the drop down menu is vanished. Why?

Upvotes: 2

Views: 389

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26360

First off, <li> outside of a <ul> (or <ol>) is invalid. li is a list element, it's not supposed to exist outside of a list.

Then, $(".dropdown:first-child") selects the first element with the .dropdown class (and NOT the first element INSIDE it). Which is, your lonely <li> element. And you replace everything in that element with some text, so it vanishes. Select $(".dropdown-toggle") instead.

Finally, you can optimize your code and accelerate it by :

  • caching $(".dropdown-toggle") instead of accessing it in the DOM and building a jQuery object every time you click

  • use e.currentTarget.innerText instead of building another jQuery object at every click with $(this).text()

Which reduces your code to an efficient one-liner.

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>

Upvotes: 2

Taki
Taki

Reputation: 17654

because this line $(".dropdown:first-child").text($(this).text()); means that you want to change the content of the whole .dropdown menu to the text of the clicked element, change the selector to select the right element which is the .dropdown-toggle like :

$(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>

Upvotes: 3

Related Questions