通过Vanilla Javascript更改引导程序下拉菜单中的选定值

Question

我刚刚开始学习Javascript，所以正在寻找普通的Javascript答案(而不是JQUERY(；

我通过createDropdown功能创建了一个动态下拉菜单；

菜单包含button元素。

每当用户点击其中一个下拉按钮时，

我想要一个带有值的警报弹出窗口(请参阅createChart功能(。

我尝试过CCD_ 4的变体；未定义的"；价值

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(用html代码更新(：

下拉菜单取自引导程序：https://getbootstrap.com/docs/4.1/components/dropdowns/#menu-项目

<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>

Answer 1

您可以为每个按钮添加一个事件侦听器

myOption.addEventListener("click", (event) => event.target )  //event.target is the pressed button

这里是一个工作示例：https://codepen.io/sarabadu/pen/YzGqgmY