通過香草 Javascript 從引導下拉菜單中更改所選值

Question

我剛剛開始學習 Javascript，所以尋找香草 Javascript 答案（不是 JQUERY）；

我通過createDropdown function 創建了一個動態下拉菜單；

菜單包含button元素。

每當用戶點擊這些下拉按鈕之一時，

我想要一個帶有值的警報彈出窗口（請參閱createChart函數）。

我已經嘗試了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()

編輯（更新為 html 代碼）：

下拉菜單取自引導程序： 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>

Answer 1

您可以為每個按鈕添加一個事件監聽器

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

這里有一個工作示例： https://codepen.io/sarabadu/pen/YzGqgmY