Develop Reference

Why doesn't my bootswatch dropdown show when I click it?

I'm using Bootswatch to make a navbar for my React project. I'm attempting to add a dropdown menu, but I can't get it to work when I click it. Here's the code I'm using:
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Separated link</a>
</div>
</li>
This code is taken directly from the Bootswatch website. However, I've also tried changing the <a> tags to <Link> tags (and thus changing the href property to to). It shows the dropdown in the navbar, but clicking on it does nothing.

Bootstrap 3.3.7 dropdown menu not working on mobile

We populating our dropdowns from a JSON file, but for some reason, it's not working on mobile. Except for the li anchors, I'm following the guidelines from the Bootstrap 3.3.7 documentation: https://getbootstrap.com/docs/3.3/components/#dropdowns.
I also added this, but the issue persists on mobile devices:
$('.dropdown-backdrop').css({display: 'none'});
What could be causing this? Here's my dropdown code.
<div class="dropdown w-100 open" id="attrib">
<button data-device="Umbra 501" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Economy
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a data-filter-dropdown="Small">Small</a></li>
<li><a data-filter-dropdown="Medium">Medium</a></li>
<li><a data-filter-dropdown="Large">Large</a></li>
<li><a data-filter-dropdown="Xlarge">Xlarge</a></li>
</ul>
</div>
UPDATES
This site is AEM 6.5. Also I noticed that all the dropdowns have the same id ("attrib").

how can I get the text on submission with bootstrap dropdown?

Normally I would be writing dropdown with select and option but somehow I came across to this by using bootstrap dropdown which uses anchor
Using a sample in bootstrap
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="get-value-btn">Get value / text</button>
If I want to get the value when I click the Get value / text with jQuery how can I do it though? Normally with select, it's straight forward but I never done it this way.
Thanks in advance for any suggestions / advices.

how do i pass the selected value in my php code?

So i've a dropdown menu of my Languages, the HTML/JS output is like this:
<div class="dropdown-menu dropdown-menu-right show">
<a class="dropdown-item " ng-click="changeLang('1')">English</a>
<a class="dropdown-item " ng-click="changeLang('2')">Spanish</a>
<a class="dropdown-item active" ng-click="changeLang('3')">French</a>
the selected one in the code above is French, (class="dropdown-item active")
my PHP code in the controller is this:
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-fr"></i></a>
As you can see above, whenever i change the value of the dropdown menu, the icon still pointing to French (obviously because hardcoded)
how do i catch the active one and refer to it in my PHP code ?

You should definitely look into using JavaScript for this - my thought process would be to set a cookie defining the currently selected option and then appending some HTML to the element. This would eliminate the need to catch this server side and re-render the page. Plus it has the added benefit of sending the option to the server on every request in case you need to perform some other action with it.

Protractor clicking on dropdown toggle

I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?

Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();