I have this piece of code of dropdown,
like this there are more than 1 dropdown,
from which i want to get the name of each drop down and its selected value
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> 0</li>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> Empty Values</li>
</ul>
</div>
for example: for the above code angularjs should return me 'Front-Desk' with its selected value '2'(say).
If there is solution from JQuery then also i would really appreciate the help.
I think I understood what you want, so your html code should be like below:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="name='Back-Desk'">Back-Desk<span class="caret"></span></button>
<ul class="dropdown-menu ">
<li ng-click="getValue(0)"><a><span> 0</span></a></li>
<li ng-click="getValue(1)"><a><span> 1</span></a></li>
<li ng-click="getValue(2)"><a><span> 2</span></a></li>
<li ng-click="getValue(3)"><a><span> 3</span></a></li>
<li ng-click="getValue('Empty Values')"><a><span> Empty Values</span></a></li>
</ul>
</div>
and your controller should contain this function
$scope.getValue = function(value) {
console.log("this is value:",$scope.name, value);
}
Hello I think you are new in angular btw:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><span ng-model="value"> 0</span></li>
<li><span ng-model="value"> 1</span></li>
<li><span ng-model="value"> 2</span></li>
<li><span ng-model="value"> 3</span></li>
<li><span ng-model="value"> Empty Values</span></li>
</ul>
</div>
In controller you have to declare a variable "$scope.value" in which your selected value will come.
Related
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>
I knew javaScript but I'm not used to it as I'm more focus on creating UI design. So decided to take up some short courses and then I've encountered this problem. There should be dropdown which consist of 4 items to choose: red, blue, green, yellow. If a user choose a color let's say yellow, the div box underneath will become yellow. I used Bootstrap for this by the way.
My code goes something like this ` Dropdown 1
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
`
Full code resides here
http://jsfiddle.net/0c4dbr9t/7/
Try this simple code
Demo
Code:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li data-color="red">Red
</li>
<li data-color="blue">Blue
</li>
<li data-color="green">Green
</li>
<li data-color="yellow">Yellow
</li>
</ul>
</div>
<div id ="box"><div>
$( document ).ready(function() {
$('.dropdown-menu li').click(function(){
var color = $(this).data("color");
$("#box").css('background-color',color);
});
});
Please let me know if this is what you needed..
html
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul id="dd" class="dropdown-menu">
<li>Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"><div>
css
#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}
js
var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);
function changeColor (e) {
if(e.target.nodeName == "A") {
document.getElementById("box").style.background =e.target.innerHTML;
}
}
Using simple javascript:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
console.log(evt.target.innerText)
document.getElementById("box").style.backgroundColor = evt.target.innerText;
}
</script>
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">
Here is my HTML code, and there are some <li> tags in it. I plan to use Speed 1, Speed 2, Speed 3, etc. to replace Content. How can I do it on Javascript ?
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Could someone give me advice?
Try this,
$('li a').on('click',function(e){
e.preventDefault();
$('button').text($(this).text());
});
Live Demo
I had misunderstood the problem and have changed the solution to fix it:
$(".dropdown-menu > li > a").click( function (e) {
e.preventDefault();
$(this).parent().parent().prev().text($(this).text());
})
You could use one of the button classes or even the button html tag to address the change but by using relative paths you will adress the right element without risking to change other buttons on your page.
fiddle
answer for you question ...........:
http://jsfiddle.net/MFmwy/
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
<li><a href=#>Speed 2</a></li>
<li><a href=#>Speed 3</a></li>
<li><a href=#>Speed 4</a></li>
<li><a href=#>Speed 5</a></li>
</ul>
</div>
Try this instead
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
<li><a href=#>Speed 2</a></li>
<li><a href=#>Speed 3</a></li>
<li><a href=#>Speed 4</a></li>
<li><a href=#>Speed 5</a></li>
</ul>
</div>
Jquery:
$('li a').click(function(){
$('button').text($(this).text());
});
JsFiddle
You'll need to watch that you don't replace the <span class="caret"></span>, so you'll need to modify the HTML slightly to add an extra span for the content:
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span>Content</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Javascript:
$('li a').on('click', function (e) {
e.preventDefault();
$('button span:first').text($(this).text());
});
See JSFiddle
EDIT: Another Alternative
Based on a comment you made in another answer about loading the content on page refresh, you can take advantage of the 'hash' part of the page address. Therefore
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span>Content</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Javascript:
$(window).bind('hashchange', onChangeSelectedSpeed);
function onChangeSelectedSpeed() {
$("li a[href="+window.location.hash+"]").each(function(){
$('button span:first').text($(this).text());
});
}
//Trigger hashchange on page load (on DOM ready)
$(window).trigger('hashchange');
And here's the JSFiddle showing it work (although the page refresh won't be demonstrable there).