时间戳

首页 > 解决方案 > 填充下拉点击它

javascript - 填充下拉点击它

问题描述

我有一个像这样的空下拉列表：

<select class="flex-40 sale-select-input">
    <option value="1">-----</option>
select>

我想通过 ajax 请求填充它，我使用了 onclick 事件：

let selectInput = document.querySelector('.sale-select-input');
selectInput.addEventListener('click', ()=>{    
  ajax.load('size/get-sizes', this.data(), (result) => {
            this.result = result;
            this.fillSizes()
        }).send();
}

ajax 结果将是这样的：

[
  id:1, name:'L',
  id:2, name:'XL'
]

并在 fillSize ：

   fillSizes() {

    let selectINput = document.querySelector('.sale-select-input');

    this.result.forEach(size => {
        let option = `<option value="${size.id}">${size.name}</option>`;
        selectINput.insertAdjacentHTML('beforeend', option);
    });
}

但是当我单击其中一个下拉选项时，也会触发 onclick 事件。我想我为“ONLY OPENING THE DROPDOWN”选择了错误的事件，谢谢

标签： javascript

解决方案

您应该在pageload和上填充下拉菜单not on click of dropdown。更新代码如下。

window.addEventListener('load', function() {
    let selectInput = document.querySelector('.sale-select-input');     
    ajax.load('size/get-sizes', this.data(), (result) => {
        this.result = result;
        this.fillSizes()
    }).send();
});

推荐阅读