动态创建下拉框值不更新及页面resize时重复渲染问题

问题1：选中值始终显示为2023 #

原因 #

1. 重复创建下拉框后，DOM中存在多个id="mySelect_tract"的元素，document.getElementById仅返回第一个匹配元素，你绑定的onchange事件只作用于最初创建的下拉框，操作后续生成的新下拉框时，打印的还是旧下拉框的默认值（2023）。
2. 事件绑定时机错误：仅在$(document).ready中绑定一次事件，后续重新创建的下拉框未绑定事件逻辑。

解决方案 #

将事件绑定逻辑移到下拉框创建过程中，确保每个新生成的下拉框都能正确绑定事件，同时结合问题2的重复创建规避逻辑，彻底解决问题：

// 在addElement_Tract函数中创建select后直接绑定事件
selectList_tract.onchange = function() {
    const dropdown_val_tract = this.value; // 用this指代当前触发事件的select，避免重复查询DOM
    console.log("dropdown_val_tract is", dropdown_val_tract);
};

问题2：调整网页尺寸时重复渲染下拉框 #

原因 #

你应该是在窗口resize事件中调用了addElement_Tract()，但未判断目标元素是否已存在，导致每次窗口尺寸变化都会创建新的下拉框和容器。

解决方案 #

在addElement_Tract函数开头添加元素存在性检查，仅当容器不存在时才创建元素：

function addElement_Tract() {
    // 检查侧边栏容器是否已存在，存在则直接返回
    if (document.getElementById('sidebar_tract')) {
        return;
    }
    // ... 原有创建元素的代码 ...
}

如果resize事件中确实需要调用该函数，添加检查后就不会重复创建；若无需更新下拉框内容，也可直接移除resize事件中的addElement_Tract()调用。

完整修改后的代码示例 #

初始化代码 #

$(document).ready(function() {
    addElement_Tract();
});

动态创建下拉框的代码 #

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

function addElement_Tract() {
    // 避免重复创建元素
    if (document.getElementById('sidebar_tract')) {
        return;
    }

    // 创建侧边栏容器
    const sidebar_tract = document.createElement("div");
    sidebar_tract.className = "sidebar_tract";
    sidebar_tract.id = "sidebar_tract";
    
    // 选项数据
    const display_array_tract = ["2023", "2022","2021","2020","2019", "2018"];
    const val_array_tract = [2023, 2022, 2021, 2020, 2019, 2018];
  
    // 创建下拉框
    const selectList_tract = document.createElement("select");
    selectList_tract.id = "mySelect_tract";
    selectList_tract.className = "mySelect_tract";
  
    // 添加选项
    for (let i = 0; i < display_array_tract.length; i++) {
        const option_tract = document.createElement("option");
        option_tract.value = Number(val_array_tract[i]);
        option_tract.text = display_array_tract[i];
        selectList_tract.appendChild(option_tract);
    }

    // 绑定选中事件
    selectList_tract.onchange = function() {
        const dropdown_val_tract = this.value;
        console.log("dropdown_val_tract is", dropdown_val_tract);
    };
  
    // 插入到DOM中
    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);
}

内容的提问来源于stack exchange，提问作者DiamondJoe12