[英]altering the selected value from bootstrap dropdown menu via Vanilla Javascript
I've just started learning Javascript, so looking for vanilla Javascript answer (not JQUERY);我刚刚开始学习 Javascript,所以寻找香草 Javascript 答案(不是 JQUERY);
I have created a dynamic drop-down menu via createDropdown
function;我通过
createDropdown
function 创建了一个动态下拉菜单;
The menu contains button
elements.菜单包含
button
元素。
Whenever a user clicks on one of these dropdown buttons,每当用户点击这些下拉按钮之一时,
I want an alert popup with the value, (see the createChart
function).我想要一个带有值的警报弹出窗口(请参阅
createChart
函数)。
I have tried variations of dropDownMenu.selectedIndex
but it's only alerting a "undefined" value.我已经尝试了
dropDownMenu.selectedIndex
的变体,但它只警告“未定义”值。
var range = function (start, stop, step) {
step = step || 1;
var arr = [];
for (var i = start; i < stop; i += step) {
arr.push(Math.round((i + Number.EPSILON) * 100) / 100)
}
return arr;
};
function createDropDown() {
var dropDown = document.querySelector('.btn[name="annual-gains"]');
// <button class="dropdown-item" type="button">test</button>')
dropDown.addEventListener("click", function (event) {
console.log("querySelectorは合ってる")
let values = range(0.05, 1.05, .05);
for (var i = 0; i < values.length; i += 1) {
let value = values[i]
var myOption = document.createElement('button');
// id
myOption.type = 'button';
// クラス名
myOption.className = 'dropdown-item';
// テキスト内容
myOption.innerHTML = values[i];
const dropDownMenu = document.querySelector('.dropdown-menu[name="test"]');
dropDownMenu.appendChild(myOption);
}
createChart();
event.preventDefault();
})
}
function createChart() {
const dropDownMenu = document.querySelector('.dropdown-menu[name="test"]');
dropDownMenu.addEventListener("click", function (event) {
let value = dropDownMenu.selectedIndex
alert(value)
})}
createDropDown()
EDIT (updated with html code):编辑(更新为 html 代码):
The dropdown menu was taken from bootstrap: https://getbootstrap.com/docs/4.1/components/dropdowns/#menu-items下拉菜单取自引导程序: https://getbootstrap.com/docs/4.1/components/dropdowns/#menu-items
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" name="annual-gains">
Annual Gains
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2" name="test">
</div>
</div>
You can add an event listener to each button您可以为每个按钮添加一个事件监听器
myOption.addEventListener("click", (event) => event.target ) //event.target is the pressed button
here a working example: https://codepen.io/sarabadu/pen/YzGqgmY这里有一个工作示例: https://codepen.io/sarabadu/pen/YzGqgmY
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.