Jquery get only the selected item in Bootstrap - javascript

There are bit similar questions like this in which the answers are right. This question is regarding, to get only the selected item not the entire array.
<div class="btn-group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="change_regions">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
If I use something like below I get many attributes which I don't need.
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});

It work alright, updates text of .btn as expected:
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
https://jsfiddle.net/itsrikin/vseam36j/2/
In your example you dont need to use .val() though, .text() would give you right value.

Related

jQuery: how to select the exact element of the same class?

Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!
So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);
Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});

Bootstrap dropdown on hover not working, what am I doing wrong?

I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.
jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...

Update dropdown button text (without destroying <span>)?

Been working with this dropdown:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
company
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
When someone clicks one of the options, I want to update the "company" text to the selected option. I was able to do this using $('#company').text('update goes here'); however using this destroys the placed next to the dropdown text. Any guidance on this one? Thanks!
Just wrap your text in a span :
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span id="cie">company</span>
<span class="caret"></span>
</button>
Then update the text of the span:
$('#cie').html('your text');
you should .append the value and not .text like this:
$('#company').append(new value);
or you can append it to the span
$('#company span').append(new value);
Add this to your JavaScript code:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
See this fiddle.
If you are using jquery, you should be able to use the .html() to assign the value of the text of the button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span id="company-name">company</span><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
Added an ID to the button, and then reference it using jquery:
$("#company-name").html("company-name-here");
with company name selected as the parameter.
In case you cannot wrap the text with an element,
Demo
function getChildText(node) {
var text = "";
for (var child = node.firstChild; !! child; child = child.nextSibling) {
if (child.nodeType === 3) {
text += child.nodeValue;
}
}
return text;
}
$(".btn-primary").click(function () {
$(this).html($(this).html().replace(getChildText(this).trim(), "New Value"));
});

Get selected item value from Bootstrap DropDown with specific ID

I am "creating" my own "ComboBox" using Bootstrap 3 and JavaScript. Here is the JSFiddle for what I have so far:
HTML:
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control"></input>
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
JavaScript:
$(document).on('click', '.dropdown-menu li a', function() {
$('#datebox').val($(this).html());
});
This approach works great untill I want to repeat this "ComboBox" several times on the page. The issue is with the JQuery function looking for ANY/ALL '.dropdown-menu li a'.
How can I change my JQuery to look only for UL with ID demolist and get its selected value?
I have tried the following without success:
I tried '#demolist .dropdown-menu li a' but that will not fire the function:
$(document).on('click', '#demolist .dropdown-menu li a', function() {
$('#datebox').val($(this).html());
});
I tried calling the Click of #demolist but #datebox gets the HTML of ALL list item of #demolist and not the selected innerHTML of item:
$('#demolist').on('click', function(){
$('#datebox').val($(this).html());
});
UPDATE:
The working solutions are:
$('#demolist li a').on('click', function(){
$('#datebox').val($(this).html());
});
OR
$('#demolist li').on('click', function(){
$('#datebox').val($(this).text());
});
$('#demolist li').on('click', function(){
$('#datebox').val($(this).text());
});
http://jsfiddle.net/kcpma/18/
Design code using Bootstrap
<div class="dropdown-menu" id="demolist">
<a class="dropdown-item" h ref="#">Cricket</a>
<a class="dropdown-item" href="#">UFC</a>
<a class="dropdown-item" href="#">Football</a>
<a class="dropdown-item" href="#">Basketball</a>
</div>
jquery Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demolist a').on('click', function () {
var txt= ($(this).text());
alert("Your Favourite Sports is "+txt);
});
});
</script>
The selector would be #demolist.dropdown-menu li a note no space between id and class.
However i would suggest a more generic approach:
<div class="input-group">
<input type="TextBox" Class="form-control datebox"></input>
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
$(document).on('click', '.dropdown-menu li a', function() {
$(this).parent().parent().parent().find('.datebox').val($(this).html());
});
by using a class rather than id, and using parent().find(), you can have as many of these on a page as you like, with no duplicated js
Did you just try
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
It works for me :)
You might want to modify your jQuery code a bit to '#demolist li a' so it specifically selects the text that is in the link rather than the text that is in the li element. That would allow you to have a sub-menu without causing issues. Also since your are specifically selecting the a tag you can access it with $(this).text();.
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
Works GReat.
Category Question
Apple
Banana
Cherry
<input type="text" name="cat_q" id="cat_q">
$(document).ready(function(){
$("#btn_cat div a").click(function(){
alert($(this).text());
});
});
Try this code
<input type="TextBox" ID="yearBox" border="0" disabled>
$('#yearSelected li').on('click', function(){
$('#yearBox').val($(this).text());
});
<i class="fas fa-calendar-alt"></i> <span>Academic Years</span> <i class="fas fa-chevron-down"></i>
<ul class="dropdown-menu">
<li>
<ul class="menu" id="yearSelected">
<li>2014-2015</li>
<li>2015-2016</li>
<li>2016-2017</li>
<li>2017-2018</li>
</ul>
</li>
</ul>
its work for me

how to change text in a button without change other tags

how to change text in a button without change other tags ?
my button :
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
my dropdown-menu :
<ul class="dropdown-menu">
<li><a id="AllItems" href="#">AllItems</a></li>
<li><a id="Countries" href="#">Countries</a></li>
<li><a id="Ships" href="#">Ships</a></li>
</ul>
I've tried the following But the span tag has been removed:
$('.dropdown-menu li a').click(function () {
var item = $(this).text();
$('button[id=ItemForSearch]').text(item);
});
I need to just change the text.But I have no idea!!
You need to replace only the first text node in the button, that is the problem here. When you use .text() or .html() it replaces the entire contents of the button.
Try
$('.dropdown-menu li a').click(function () {
$('#ItemForSearch').contents().eq(0).replaceWith($(this).text());
});
Demo: Fiddle

Categories

Resources