Having trouble choosing an option from the dropdown menu in bootstrap

I'm experiencing an issue with a bootstrap dropdown that I created. I am unable to select an item from it. The code is shown below:

var aos = '';
$('.dropdown-item').click(function(event) {
  event.preventDefault(); // Prevents scrolling to top of page
  aos = $(this).text(); // Get the text value of the thing that was clicked
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">



    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Project Role
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">PO</a></li>
    <li><a class="dropdown-item" href="#">SM</a></li>
    <li><a class="dropdown-item" href="#">AC</a></li>
    <li><a class="dropdown-item" href="#">Team Member</a></li>
  </div>
</div>

javascriptbootstrap-4

Answer №1

If you're looking to mimic a select option using JavaScript, here's how you can do it:

Here's the solution:

Add this snippet to your function:

var selectedOption = '';
$('.dropdown-item').click(function(event) {
  event.preventDefault();
  selectedOption = $(this).text();
  $('.dropdown-toggle').text(selectedOption); // This line updates the dropdown toggle with the selected option.
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
    Project Role
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">PO</a></li>
    <li><a class="dropdown-item" href="#">SM</a></li>
    <li><a class="dropdown-item" href="#">AC</a></li>
    <li><a class="dropdown-item" href="#">Team Member</a></li>
  </div>
</div>

This code sets the selected option value as the text displayed in the dropdown button.

Answer №2

Everything seems to be in order with your code

Consider utilizing the console.log function as demonstrated below.

var aos = '';
$('.dropdown-item').click(function(event) {
  event.preventDefault(); // Prevents scrolling to top of page
  aos = $(this).text(); // Capture the text of the clicked item
  console.log(aos)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><a class="dropdown-item" href="#">PO</a></li>
  <li><a class="dropdown-item" href="#">SM</a></li>
  <li><a class="dropdown-item" href="#">AC</a></li>
  <li><a class="dropdown-item" href="#">Team Member</a></li>
</div>

https://i.sstatic.net/l3Ia0.png

Answer №3

experiment with data-bs-toggle="dropdown" for toggling the dropdown

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the package.json file for a specific package by making an HTTP request to public repositories

I’ve been searching online but haven’t found a satisfying answer to my question yet. My main objective is to generate a dependency tree for a particular npmjs library of a specific version, like retrieving the dependency tree for the angular library v ...

javascriptnpmrepository

Issue: Unable to locate module - Unable to resolve 'core-js/modules/es.error.cause.js'

I've incorporated Vuexy Dashboard into my project, which utilizes Vue 2. Now, I'm in the process of upgrading it to Vue 3. However, I have encountered an error that has me stuck. Any assistance with this issue would be greatly appreciated. Thank ...

javascriptvue.jsvuejs2vuejs3

Tips on tallying the frequency of items in a state array

I'm currently working on an application in which clicking a button adds the item's value to the state. The button is clickable multiple times, allowing the same item to be added multiple times in the state array. My current code snippet: export ...

javascriptarraysreactjsstate

Guide to dynamically assigning v-on with v-for

I'm working on a Vue code that dynamically creates a menu using v-for, with each element requiring a different method when clicked. Here's what I have so far: <span v-for="(menuItem, index) in menuItems" :key="index"> ...

javascripthtmlvue.js

Learn how to update image and text styles using Ajax in Ruby on Rails with the like button feature

I'm working on implementing a Like button in Rails using Ajax, similar to this example: Like button Ajax in Ruby on Rails The example above works perfectly, but I'm interested in incorporating images and iconic text (such as fontawesome) instead ...

javascriptruby-on-railsajax

Transmit updated value to masterpage upon selection alteration

In my current project using ASP.NET, I have a MasterPage that includes a navigation bar with different options. One of the options leads to another page where the company now requires me to pass a parameter through the link. After some research, I managed ...

javascriptasp.netselecthrefmaster-pages

Guidelines for simultaneously modifying two dropdown select options

Is it possible to have one dropdown automatically change its value based on the selection made in another dropdown? For instance, if 'Value 1' is chosen from 'dropdown 1', can we set 'dropdown 2' to automatically display the ...

javascriptjqueryhtmlformsdrop-down-menu

Error encountered: Parsing error in Typescript eslint - The use of the keyword 'import' is restricted

My CDK application is written in typescript. Running npm run eslint locally shows no errors. However, when the same command is executed in a GitLab pipeline, I encounter the following error: 1:1 error Parsing error: The keyword 'import' is r ...

javascripttypescripteslintaws-cdkcicd

Issue with create-react-app and express server not displaying correctly in Internet Explorer

My application functions perfectly with Chrome and Safari. It utilizes React for the front-end and Express for the back-end. However, when I try to open it in Internet Explorer, all I see is a blank white page. Additionally, I encounter this error message: ...

javascriptexpressinternet-explorercreate-react-app

Ways to showcase Switch/Case in two separate drop-down menus

I'm currently working on a PHP file with a switch/case structure that I believe is in JSON format. While I may not be an expert in PHP, AJAX, and JSON, I'm really putting effort to learn more about it. <?php switch($_GET['make'] ...

phpjavascriptjqueryajaxforms

Implement a dynamic card display using Bootstrap to ensure optimal responsiveness

Does anyone know how to create a card view using Bootstrap in HTML and CSS? https://i.sstatic.net/3hIsf.png I've been trying to replicate the image above with no success. Here is the code I have so far: <link href="https://stackpath.bootstrap ...

htmlcssbootstrap-4

Extending a Typescript class from another file

I have a total of three classes spread across three separate .ts files - ClassA, ClassB, and ClassC. Firstly, in the initial file (file a.ts), I have: //file a.ts class ClassA { } The second file contains: //file b.ts export class ClassB extends Class ...

javascriptnode.jsmoduletypescript

Exploring the concept of passing 'this' as a parameter in JavaScript

<button type="button" aria-haspopup="dialog" aria-controls="b" onclick="openLayer($('#b'))"> button</button> <div role="dialog" id="b"><"button type="button">close<"/button></div> function openLayer(target){ ...

javascriptjqueryparameters

Fixing the Angular2 glitch: 'Uncaught TypeError: Cannot read property 'apply' of undefined'

Seeking solutions: How can I fix the "Uncaught TypeError: Cannot read property 'apply' of undefined" error that keeps showing up in the console of my Angular2 application? Any helpful insights are appreciated! ...

javascriptangular

How can I disable a checkbox in AngularJS?

Is there a way to automatically disable a checkbox when selecting an item from the combo box? For example, if "ABONE" is selected, Angular should disable the ABONE checkbox. Note (for example): DefinitionType: ABONE https://i.sstatic.net/vcZpR.png ...

javascripthtmlangularjstwitter-bootstrapcheckbox

Save the content of a string object into an array

I am currently implementing an array sorting functionality using the MVC approach. The array called "array" is used to store values provided at runtime. Within the view, there is a textbox and a button for user input of integer values. Upon clicking the bu ...

javascriptc#asp.net-mvc

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

I have a button with both the label and onClick properties. Additionally, I have an array containing the values I need to assign to the label property. Here is the code snippet: render(){ {tabel_soal.forEach(function (item, index) { <Ra ...

javascriptreactjsfunction

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

javascriptphpjqueryhtmlajax

A guide on using FileReader to efficiently read multiple images

I need to be able to select multiple images from one input and read them using File Reader. If I leave it as is, it only gives me one picture. const [image , setImage] = useState(''); const [imageSelected , setImageSelected] = useState(nul ...

javascriptreactjs

Transmit specific elements from an array to another array exclusively with Javascript

I have some data stored in a JSON array like this: source=[{"OperationName":"All","PrivilegeName":"Roles CRUD"}, {"OperationName":"Read","PrivilegeName":"Roles Read Delete"}, {"OperationName":"Delete","PrivilegeName":"Roles Read Delete"}, ...

javascriptjqueryarraysjsonajax