Develop Reference

How to console selected dropdown option using <ul> <li>

In this code i am not able to console the selected dropdown in console.
HTML
<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" (change)="selectChangeHandler($event)">
<li class="dropdown-item" *ngFor="let option of selectedDay">{{option}}</li>
</ul>
</div>```
TS.
selectedDay = ['GCP','Azure','AWS'];
selectChangeHandler(event: any) {
this.selectedDay = event.target.value;
console.log(this.selectedDay)
}

You can not add change event to ul tag, you need change ul/li tag to select/option tag. And you should distint between selectedDay and listSelectedDay variable.
HTML
<div class="dropdown">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
>
Dropdown
</button>
<select class="dropdown-menu" (change)="selectChangeHandler($event)">
<option class="dropdown-item" *ngFor="let option of listSelectedDay">
{{ option }}
</option>
</select>
</div>
TS
export class AppComponent {
listSelectedDay = ['GCP', 'Azure', 'AWS'];
selectedDay = '';
selectChangeHandler(event: any) {
this.selectedDay = event.target.value;
console.log(this.selectedDay);
}
}
Demo code https://stackblitz.com/edit/angular-ivy-tapafd

May be You can use button for that code for e.g
----HTML----
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" name="selected" >
<li><a class="dropdown-item" data-bs-toggle="modal" *ngFor="let option of Menu">
<button class="btn btn-secondary" type="button" (click)="selectedChanged(option)">{{option}}</button>
</a></li>
</ul>
</button>

How to make dependency in dropdowns which is made with buttons and list

I have task to create dependency of options selected in first dropdown to "filter" options in second dropdown.
For this I've already create "value" in li tag which is acquired from the backend side. FE side is created of buttons and ul, il tags due to some css options etc.
Logic of selection is:
when I choose in first dropdown option1 in the second dropdown should appear only v1.0, when option2 is selected there should be latest and v2.0 etc.
I would like to have code as much easy as possible.
This is my existing HTML page:
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="1"><a rel="name1">option1</a></li>
<li value="2"><a rel="name1">option2</a></li>
<li value="3"><a rel="name1">option3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="2"><a rel="tag">latest</a></li>
<li value="2"><a rel="tag">v2.0</a></li>
<li value="1"><a rel="tag">v1.0</a></li>
... // more options ...
</ul>
</div>
I've started the JS with:
$('.dropdown-menu li a[rel=name1]').on('click',function() {
var value = $(this).parents('li').val()
With this I'm able to get the value from items in first dropdown but I'm lost how to continue and filter options in the second dropdown. Thank you for any help!

Unless you have a href on the a it is useless - you do not even get a little hand.
Also .val() is reserved for form field which are the only object that can have a value and be valid
Instead use data-attr on the LI itself and give each ul a class
$('#firstSel>li').on('click',function() {
var value = $(this).attr("data-value");
$("#secondSel").find("li").hide()
$("#secondSel").find("li[data-value="+value+"]").show();
});
.dropdown-menu>li { cursor: pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="firstSel">
<li data-value="1">option1</li>
<li data-value="2">option2</li>
<li data-value="3">option3</li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="secondSel">
<li data-value="2">latest</li>
<li data-value="2">v2.0</li>
<li data-value="1">v1.0</li>
</ul>

dropdown with form fields bootstrap 3

I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>

How to display text of selected List item on dropDown?

I am using bootstrap dropDown html and I am trying to display the text of the selected item Note: I have a set of 3 dropDowns:
<ul id="filters" class="nav navbar-nav navbar-right">
<li class="option-combo dropdown Agency">
<a class="btn btn-default btn-lg dropdown-toggle">
Agency <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
<li><a class="btn btn-default btn-lg" href="#">All</a></li>
<li><a class="btn btn-default btn-lg selected" href="#filter-agency-TBWA">TBWA</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-agency-Ogilvy">Ogilvy</a></li>
</ul>
</li>
<li class="option-combo dropdown Client">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li>All</li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Sky" data-filter-value=".Sky">Sky</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Vodafone" data-filter-value=".Vodafone">Vodafone</a></li>
</ul>
</li>
<li class="option-combo dropdown Year">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2013">2013</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2014">2014</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2012">2012</a></li>
</ul>
</li>
</ul>
The jQuery I tried with no luck:
$('.filter').on('click', 'a', function() {
var $text = $(this).text();
$(this).prev(".dropdown-toggle").text($text);
});

This works, but it's ugly. Change:
$(this).prev(".dropdown-toggle").text($text);
to:
$(this).parent().parent().siblings(".dropdown-toggle").html($text + ' <span class="caret"></span>');
I'm sure there's a better way to do that, but since you're clicking on the <a> inside an <li> inside a <ul>, .parent().parent()siblings()... does the trick, as it will select the sibling of the <ul> that has a class of .dropdown-toggle, and change it's display text to that of the click <a> tag.
Hope that makes sense!
Edited to add the caret.
Bootply Example

This solution is cleaner than using parent() jquery because it finds the closest (traveling up the dom tree) class dropdown and then within that finds dropdown-toggle class (traveling down the tree). as long as your dropdowns all have class dropdown in the outer div and the dropdown-toggle in the inner div, it doesnt matter the order in which your html is structured:
$('.filter').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
hope this helps!

Here a clean way to do this: http://jsfiddle.net/4g01b2tb/2/
$('.filter').click(function (event) {
var targetText=event.target.text;
$(this).prev('.btn').text(targetText);
});

Modify value of ng-show from true to false once redirected to home page from login page in angularjs

I'm newbie to angularjs and had a problem to solve where I had to modify the value of ng-show="false" to ng-show="true" when user is redirected to home page after he/she is logged in successfully!!
here is what i'm trying to do:
.controller('loginCtrl', function ($scope, ..., showmenu)
{
$scope.dropdown = showmenu.hide;
....
}
.factory('showmenu', function() {
return {
show : 'true',
hide : 'false'
}
})
index.html
<div class="btn-group" dropdown="" ng-show="false">
<button type="button" class="btn btn-danger">Kyle Thomas</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span> <span class="sr-only">Split
button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Profile</li>
<li>Setting</li>
<li>Help</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</div>
this drop down should show when redirected to home.html!!
Thanks

I think you are using ng-show value directly as false. when scope updates the value not changed. so use the $scope.dropdown in ng-show
<div class="btn-group" dropdown="" ng-show="dropdown">
<button type="button" class="btn btn-danger">Kyle Thomas</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span> <span class="sr-only">Split
button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Profile</li>
<li>Setting</li>
<li>Help</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</div>
here the value of ng-show changes angular automatically handle the ng-hide directive.
if ng-show ="true" it shows the html
if ng-show = "false" it hides the html. here no need of ng-hide.
In your controller set the $scope.dropdown = false; first. It hides the html. when user logins into your app change the value of $scope.dropdown = true; it shows the html