For some reason I'm having trouble in selecting an element above another element. I would like to select the nearest .discount-dropdown class that sits aboove the .discount-type class. What am I doing wrong?
HTML (multiple of these):
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false">$ <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
jQuery:
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
because button is not a parent of li
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('ul').prev('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
I would suggest some changes in the way in which you are updating the currency like
$('.discount-type').on('click', function(event) {
var sign = $(this).html().substr(0, 1);
$(this).closest('ul').prev('.discount-dropdown').find('.currency').text(sign)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false"><span class="currency">$</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
Closest function will search for closest parent with given criteria, your button is not any parent of your element. So using closest can be used to find parent for both your elements - discount-type and your button. Having handler to your parent, you can find your button.
$buttonElement = $(this).closest('.input-group-btn').find('.discount-dropdown').html();
input-group-btn - is parent for both elements
discount-dropdown is a child element for input-group-btn
Try this
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).parent().parent().parent().find('.discount-dropdown').html(); //this is working fine
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
Working Demo
use closest('ul') instead of closest('.discount-dropdown').
You could also use parentsUntil+parent
$(this).parentsUntil('.discount-dropdown').parent().html();
Related
I want to click this button and choose what i want the date selection.
My Document:
<div class="input-group-btn open">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">選取
<span class="caret"></span>
</button>
<ul id="mnuShowingDate" class="dropdown-menu pull-right">
<li>2017/07/29 (週六)</li>
<li>2017/07/30 (週日)
</li><li>2017/07/31 (週一)</li>
<li>2017/08/01 (週二)</li>
<li>2017/08/02 (週三)</li>
<li>2017/08/03 (週四)
</li>
</ul>
</div>
I only know use the click function like this:
casper.then(function () {
this.click('button.btn.btn-danger.dropdown-toggle');
});
It works , but i want to click the second li which is 2017/07/30 now.
How can i select it ? Any ideas? Thanks in advance.
I have a bootstrap dropdown, and I want to keep the text of what is selected. I have tried most of the ways tried here, Get Value From html drop down menu in jquery , but there was never really an answer given, so I am still stuck.
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
I have a js function that looks as follows
$("#tableMenu").click(function(){
var selText = $("#tableMenu").text();
document.getElementById("tableButton").innerHTML=selText;
});
but as explained in the above link, $("#tableMenu").text(); returns everything in the dropdown as a string, not just the one wanted. How do I get the text just from the one selected.
You need to attach the click() handler to the a element within the ul that gets toggled. You can then retrieve the text() of that element and set it to the related button. Try this:
$("#tableMenu a").on('click', function(e) {
e.preventDefault(); // cancel the link behaviour
var selText = $(this).text();
$("#tableButton").text(selText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
Have you tried using an actual HTML drop down box and not an unordered list?
<select name="tableMenu" id="tableMenu" class="dropdown-menu">
<option value="Att1">Att1</option>
<option value="Att2">Att2</option>
<option value="Att3">Att3</option>
</select>
You should then be able to use:
var selText= document.getElementById("tableMenu").value;
Bind the click event to li and using this get the selected text and assign to the tab button text
$("#tableMenu li").click(function () {
var selText = $(this).text();
document.getElementById("tableButton").innerHTML = selText; // $("#tableButton").text(selText); //Using Jquery
});
Here's a vanillaJS way:
Given the following bootstrap 4 dropdown snippet:
<div class="dropdown-menu" id="select-color-dropdown" aria-labelledby="select-color">
<a class="dropdown-item" href="#">Red</a>
<a class="dropdown-item" href="#">Orange</a>
<a class="dropdown-item" href="#">Green</a>
<a class="dropdown-item" href="#">Gray</a>
</div>
One could write an event listener:
/* find web elements */
const colorSelectors = document.querySelector("#select-color-dropdown");
/* define event listeners */
const loadEventListeners = () => {
colorSelectors.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target.innerText);
});
}
/* Load all event listeners */
loadEventListeners();
which would print the selected option on every select (Red, Green...)
I currently have a dropdown menu so the user can select an option to refine their search by like so:
<button name = "toggle" tabindex="-3" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" >
<li><span class="t">restaurant</span></li>
<li> <span class="t">beauty salon</span></li>
<li> <span class="t">bars</span></li>
<li class="divider"></li>
<li> <span class="t">other</span></li>
</ul>
What I am wanting to do is when an option is selected from the drop down menu to update an elements name so I can then access whatever was selected on the form afters its been submitted. At the minute ive got this:
$(document).ready(function(){
$('ul.dropdown-menu li').click(function()
{
var field = document.createElement("input");
field.name=$(this).find("span.t").text();
}
});
});
How would I go about doing what i specified because I am a little unsure
If I have understood the question correctly you want to create an input element and update it's name property on the click event. If this is the case you can code:
$(document).ready(function() {
// create an input and append to #somewhere
var $field = $('<input>').appendTo('#somewhere');
$('ul.dropdown-menu li').click(function() {
$field.prop('name', $(this).find("span.t").text());
});
});
If the element should be generated on the first click:
var $field;
$('ul.dropdown-menu li').click(function() {
var name = $(this).find("span.t").text().trim();
if ( !$field ) {
$field = $('<input>', {
'type': 'text'
}).appendTo('#somewhere');
}
$field.prop('name', name);
});
here the html code, and i want to get the id of next element from clicked element a with class coba or to get id of element table class coba2.
<div class="dropdown">
<label>Kategori</label>
<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">
<li role="presentation">
<a class="coba" id="teks" role="menuitem" tabindex="-1" href="#" onclick="tambah_kues_teks()">Teks</a>
</li>
</ul>
</div>
<table class="coba2" id="kues_teks-'+i+'">
</table></div>
and i've tried using this script
var a = $('.coba').next('.coba2'); alert(a.attr('id'));
but it show me undefined, anyone know how?
You need to travel up the DOM tree, until you are on the same level as .coba2:
var id = $('.coba').closest('.dropdown').next('.coba2').attr('id');
alert( id );
you should use
var a = $('.coba').parents('.dropdown').next('.coba2'); alert(a.attr('id'));
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"));
});