I want to call my JavaScript function based on the dropdown value selected. This is what I have, but when I click on age or the other value, nothing changes. Am i missing something?
<div class="container d-flex justify-content-center">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle mr-2" type="button" id="data" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Search Data
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Age</a>
<a class="dropdown-item" href="#">Gender</a>
</div>
</div>
```
JS:
const data = document.getElementById("data").value;
data.addEventListener("change", (event) =>
usersFetch(`http://pip-data:8000/v1/content/${event.target.value}`)
);
Related
I have a dropdown, how to programmatically set selected value?
<div class="dropdown chart-dropdown">
<button class="btn btn-sm border-0 dropdown-toggle p-50" type="button"
id="ddDataUsage" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This Month
</button>
<div id="dd" class="dropdown-menu dropdown-menu-end" aria-labelledby="ddDataUsage">
<a class="dropdown-item" data-value="0">This Month</a>
<a class="dropdown-item" data-value="1">Last Month</a>
</div>
</div>
I have tried the below, but no luck
$('#dd').val('1');
let element = document.getElementById('dd');
element.value = '1';
What did I do wrong?
You can use the data attribute as a selector to refer to the actual link. Then use an if statement to verify it exists, then simply add a class to that link stating its selected.
This is a very basic example without knowing more information.
let sel = document.querySelector("[data-value='1']");
if(sel){
sel.classList.add("selected");
}
.selected{color:red;}
<a class="dropdown-item" data-value="1">Last Month</a>
<a class="dropdown-item" data-value="0">Next Month</a>
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>
I want to do something like a dropdown so that my user can pick whether they want gmail, hotmail, or outlook. And then, I want the button to update to show their preference. I must use bootstrap only and thus cannot use < select> due to assignment reasons.
So far, I've tried giving them all the same id, but JS just used the first one, and i dont want to give them all different IDs (too troublesome). So what I've written is to use the child number (like an array) and putting the value into the button. However, I have no idea how to find out the position number of the current html tag. Please help me and thank you for the help in advance
Bootstrap CDN used (Bootstrap 4.6.0):
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button' onclick='example()'>#gmail.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#hotmail.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#outlook.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#yahoo.com</a>
</div>
</div>
<script>
function example() {
var c = document.getElementById('emailexample').children;
txt = c[i].textContent
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>
This should do the trick!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id='btnemailexample' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#example.com
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#gmail.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#hotmail.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#outlook.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#yahoo.com</a>
</div>
</div>
<script>
function example(el) {
var txt = el.textContent;
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>
In your case you don't need the search the id or the children, you can just use the event param.
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button' onclick='example(event)'>#gmail.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#hotmail.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#outlook.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#yahoo.com</a>
</div>
</div>
<script>
function example(event) {
var txt = event.target.textContent;
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>
A best solution in this case would be to use event delegation which will reduce your ID or Classes markup issue, adding function to every element, etc. It will help you get your required data as well.
Here is a good article on event delegation
You could do this a lot better if you have some JavaScript library like jQuery. I'll show you how to do it by both means.
Please note that I have not linked any styles. So make sure to link them for better viewability.
Using Core Javascript
// Add event listener to table
const el = document.getElementById("emailexample");
el.addEventListener("click", function(e) {
e = e || window.event;
var target = e.target || e.srcElement,
text = target.textContent || target.innerText;
document.getElementById("btnemailexample").textContent = text;
}, false);
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button'>#gmail.com</a>
<a class="dropdown-item" role='button'>#hotmail.com</a>
<a class="dropdown-item" role='button'>#outlook.com</a>
<a class="dropdown-item" role='button'>#yahoo.com</a>
</div>
</div>
Using jQuery
$("#emailexample .dropdown-item").on('click', function(e) {
e.preventDefault();
var text = $(this).text();
$("#btnemailexample").text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button'>#gmail.com</a>
<a class="dropdown-item" role='button'>#hotmail.com</a>
<a class="dropdown-item" role='button'>#outlook.com</a>
<a class="dropdown-item" role='button'>#yahoo.com</a>
</div>
</div>
Well this doesn't worked for me and idk what to do so I ask you guys hopefully you can help me. Script is at the top, in the middle I add picture with id and I want to apply the change on a button below.
function pictureChange()
{
document.getElementById("theImage").src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539113123667";
}
<div style="padding-top:2%;padding-left:42.7%" class="row">
<img id="theImage" src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539091308847" style="width:300px;height:240px">
</div>
<center>
<div class="btn-group" style="padding-top:1%">
<button type="button" class="btn btn-danger" onclick="pictureChange()">Vyberte barvu</button>
<button type="button" class="btn btn-danger dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Hnědá</a>
<a class="dropdown-item" href="#">Lakované dřevo</a>
<a class="dropdown-item" href="#">Olej černá</a>
<a class="dropdown-item" href="#">Olej bílá</a>
<a class="dropdown-item" href="#">Šedá</a>
<a class="dropdown-item" href="#">Světle hnědá</a>
<a class="dropdown-item" href="#">Teak</a>
<a class="dropdown-item" href="#">Zelená</a>
</div>
</div>
</center>
You're trying to change it to the same picture as it was. It's actually working you can't just see it.
I Have made the Multiple Drop-down menus Dynamicly but my issue arrises that only the First dropdown menu populates no matter which button is pushed. I can verify in Chrome Console that the information is different in each button dropdown. I have made this Jsfiddle (http://jsfiddle.net/aq9Laaew/34739/) as a test and the Issue still occurs.
<button class="btn btn-secondary dropdown-toggle" type="button" id="371390773" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 1 button</button>
<div class="dropdown-menu" aria-labelledby="371390773">test1</div>
<button class="btn btn-secondary dropdown-toggle" type="button" id="371116034" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 2 button</button>
<div class="dropdown-menu" aria-labelledby="371116034">test2</div>
<button class="btn btn-secondary dropdown-toggle" type="button" id="371078302" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">test3 button</button>
<div class="dropdown-menu" aria-labelledby="371078302">test3</div>
You forgot to wrap the <button> and <div> inside <div class="dropdown">. It should look like the following:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" ... >test 1 button</button>
<div class="dropdown-menu" ... >test1</div>
</div>
See Bootstrap docs. Here's the jsfiddle I've corrected using your original example.