从动态创建的下拉菜单更新当前下拉值时出现问题

Question

我在读取 JavaScript 中动态创建的下拉列表的值时遇到问题。我调用函数

addElement_Tract()

，这是创建下拉菜单的函数，并读取当前值：

  $(document).ready(function() {
    addElement_Tract();
    document.getElementById('mySelect_tract').onchange = function(){
      dropdown_val_tract = document.getElementById('mySelect_tract').value;
      console.log("dropdown_val_tract is", dropdown_val_tract);
    }
   
});

这是我在 DOM 中动态创建下拉菜单 (mySelect_tract) 的地方：

function insertAfter_Tract(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

 function addElement_Tract() {
    
    
    // create a sidebar_tract to hold legend and dropdown
    const sidebar_tract = document.createElement("div");
    sidebar_tract.className = "sidebar_tract";
    sidebar_tract.id = "sidebar_tract";
    
    //Create array of options to be added
    var display_array_tract = ["2023", "2022","2021","2020","2019", "2018"];
    var val_array_tract = [2023, 2022, 2021, 2020, 2019, 2018];
  
    //Create and append select list
    var selectList_tract = document.createElement("select");
    selectList_tract.id = "mySelect_tract";
    selectList_tract.className = "mySelect_tract";
  
  
    //Create and append the options
    for (var i = 0; i < display_array_tract.length; i++) {
        var option_tract = document.createElement("option");
        option_tract.value = Number(val_array_tract[i]);
        console.log(option_tract.value);
        option_tract.text = display_array_tract[i];
        selectList_tract.appendChild(option_tract);
    }
  
   
    // add the newly created element and its content into the DOM
    // Get a reference to the parent node
    const parentDiv_tract = document.getElementById("map_choropleth_state_tract").parentNode;

    const mapDiv_tract = document.getElementById("map_choropleth_state_tract");


    insertAfter_Tract(sidebar_tract, mapDiv_tract)

    sidebar_tract.appendChild(selectList_tract);
    
  }

我遇到的几个不同的问题：

1. 无论选择什么，下拉值都显示为 2023（即当前选择的值未被识别）。

每次我调整网页大小时，下拉菜单都会在 DOM 上重新绘制自身（即呈现重复项）。这显然不是我想要的。
我故意调用

document.getElementById('mySelect_tract').onchange

函数

after

addElement_Tract() 函数，所以我对这里发生的事情感到困惑。

Answer 1

addElement_Tract

函数。

虽然有多种方法可以向元素添加事件侦听器，但通常每当您向 DOM 添加新元素时，您还需要向其添加所需的任何事件侦听器。您无法读取下拉列表值的原因是您有多个具有相同 ID 的选择框。浏览器不知道要选择哪个元素，因此它会选择页面首次加载时最初选择的第一个元素。另外，由于您仅将更改事件应用于原始元素，而不是动态添加的元素（即使它具有相同的 ID）。所以我建议像这样调整你的代码：

$(document).ready(initElement_Tract);

function initElement_Tract(){
    addElement_Tract();
    document.getElementById('mySelect_tract').addEventListener('change', function(){
        dropdown_val_tract = this.value;
        console.log("dropdown_val_tract is", dropdown_val_tract);
    })
}

执行此操作后，您还应该确保删除之前的下拉列表。您可以通过创建一个新函数来删除它或仅在 

initElement_Tract

函数中执行此操作，如下所示：

function initElement_Tract(){
    // Remove Previous dropdown
    document.getElementById('mySelect_tract')?.remove();
    
    // Add new dropdown
    addElement_Tract();

    // Add events for dropdown
    document.getElementById('mySelect_tract').addEventListener('change', function(){
        dropdown_val_tract = this.value;
        console.log("dropdown_val_tract is", dropdown_val_tract);
    })
}

最后，如果您使用调整大小事件，我建议包括去抖动功能，以便您可以节省客户端资源并提高性能。