Bootstrap dropdown menu with Javascript List group

Question

Bootstrap dropdown menu with Javascript List group

<div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" 
                  data-toggle="dropdown" aria-haspopup="true" aria- 
                         expanded="false">
                    Sort <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">By Name</a></li>
                    <li><a href="#">By Category</a></li>
                    <li><a href="#">By Price</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Default Order</a></li>
                </ul>
            </div>


  <script type="text/javascript">

    $(function() {
        $(".dropdown-menu li a").click(function() {
            var selection = $(this).text();
           alert(selection);
        });

    });
</script>

I would like to display in an alert box the option I selected from the list. For instance, if I select "By Category," I want the alert to show "By Category" or any related information. Please assist me with this!

javascript drop-down-menu bootstrap-4

Answer 1

Answer №1

Update the code snippet from

var show = $('.dropdown-menu li a ').text();

Change it to

var show = $(this).text();. This modification will retrieve the currently selected item from the dropdown list.

$(function() {
  $(".dropdown-menu li a").click(function() {
    var show = $(this).text();
    alert(show);
  });
});

<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" 
    data-toggle="dropdown" aria-haspopup="true" aria- 
           expanded="false">
      Sort <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
      <li><a href="#">By Name</a></li>
      <li><a href="#">By Category</a></li>
      <li><a href="#">By Price</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Default</a></li>
  </ul>
</div>

Answer 2

Update the code snippet from

var show = $('.dropdown-menu li a ').text();

Change it to

var show = $(this).text();. This modification will retrieve the currently selected item from the dropdown list.

$(function() {
  $(".dropdown-menu li a").click(function() {
    var show = $(this).text();
    alert(show);
  });
});

<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" 
    data-toggle="dropdown" aria-haspopup="true" aria- 
           expanded="false">
      Sort <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
      <li><a href="#">By Name</a></li>
      <li><a href="#">By Category</a></li>
      <li><a href="#">By Price</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Default</a></li>
  </ul>
</div>

Answer 3

Answer №2

Your code is looking good, but there is a slight issue with the event function where all the a elements are being selected instead of the one that is clicked. You can fix that by modifying the code to specifically target the clicked element like so:

$(".dropdown-menu li a").click(function(e) {
   var clickedItem = $(e.target).text();
   alert(clickedItem);
});

By adding the argument "e" to the event function, we can access the target element and use it as the selector for our code.

Answer 4

Your code is looking good, but there is a slight issue with the event function where all the a elements are being selected instead of the one that is clicked. You can fix that by modifying the code to specifically target the clicked element like so:

$(".dropdown-menu li a").click(function(e) {
   var clickedItem = $(e.target).text();
   alert(clickedItem);
});

By adding the argument "e" to the event function, we can access the target element and use it as the selector for our code.

Bootstrap dropdown menu with Javascript List group

Answer №1

Answer №2

Similar questions

Having trouble accessing my API through localhost with NextJS

Having trouble accessing the input class with jQuery

Navigating horizontally within a list using Sencha Touch2

Query for string type data between specific dates in MongoDB

A guide on using jQuery-Tabledit and Laravel to efficiently update table rows

The dynamically generated hyperlink is not displaying correctly

The functionality of jQuery's appendTo method seems to be malfunctioning

Alternate the color over time using CSS

Having issues with reading files in PHP using AJAX? Explore alternative methods for downloading files seamlessly

The message from Vee-validate indicates that the validator 'required_if' does not exist within the system

Using React and TypeScript to enable file uploads

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

Receiving JSON in a C# web service: A step-by-step guide

Why is it that the reduce function is not returning the object I expected?

Trouble parsing JSON in Classic ASP

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

The connection between the layout of dropdown menus and the way data is handled in forms

Discovering what is impeding the rendering of a webpage

Format specific words or characters in a text input

When clicked, elevate the element to the top of the window with an offset