如何在document.createElement创建元素后编辑select下拉菜单？

核心思路是先保存select元素的引用，再通过循环生成1-10的选项并添加进去，同时要注意表格的DOM结构规则（tr必须包含td，不能直接把td挂载到table上）。

1. 修正你最初的测试代码 #

你最初的代码存在DOM结构错误，同时未给select添加选项，修正后如下：

// 用const/let声明变量，避免全局污染
const table_row = document.createElement('tr');
const score_column = document.createElement('td');
const album_location = document.getElementById('album_table');

// 创建select并保存引用
const scoreSelect = document.createElement('select');
// 循环生成1到10的选项
for (let i = 1; i <= 10; i++) {
  const option = document.createElement('option');
  option.value = i; // 设置选项值
  option.textContent = i; // 设置选项显示文本
  scoreSelect.appendChild(option); // 把选项加到select里
}

// 正确的DOM嵌套：td放入tr，tr放入table
score_column.appendChild(scoreSelect);
table_row.appendChild(score_column);
album_location.appendChild(table_row);

2. 修改你的display_albums函数 #

在你的主代码中，display_albums函数生成表格行时，需要替换掉创建select的那段代码，改成带选项的版本：

修改后的完整display_albums函数：

let album_list = [];
       
function display_albums(){
    document.getElementById('album_table').innerHTML = '';
    const table_header = document.createElement('tr');
    const table_album_header = document.createElement('th');
    const table_artist_header = document.createElement('th');
    const table_date_header = document.createElement('th');
    const table_score_header = document.createElement('th');
    table_album_header.innerText = 'Album';
    table_artist_header.innerText = 'Artist';
    table_date_header.innerText = 'Date';
    table_score_header.innerText = 'Score';

    const album_location = document.getElementById('album_table');
    album_location.appendChild(table_header);
    table_header.appendChild(table_album_header);
    table_header.appendChild(table_artist_header);
    table_header.appendChild(table_date_header);
    table_header.appendChild(table_score_header);

    album_list.forEach(function (album){
        const table_row = document.createElement('tr');
        const album_column = document.createElement('td');
        const artist_column = document.createElement('td');
        const date_column = document.createElement('td');
        const score_column = document.createElement('td');

        const delete_button_button = document.createElement('button');
        delete_button_button.innerText = "Delete";
        delete_button_button.id = album.id;
        delete_button_button.onclick = delete_album;

        album_column.innerText = album.album_name;
        artist_column.innerText = album.artist;
        date_column.innerText = album.release_date;

        // --- 重点修改部分 ---
        // 创建带1-10选项的select
        const scoreSelect = document.createElement('select');
        for (let i = 1; i <= 10; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            scoreSelect.appendChild(option);
        }
        // 如果album有已保存的score，设置默认选中
        if (!isNaN(album.score)) {
            scoreSelect.value = album.score;
        }
        score_column.appendChild(scoreSelect);
        // --- 结束修改 ---

        album_location.appendChild(table_row);
        table_row.appendChild(album_column);
        table_row.appendChild(artist_column);
        table_row.appendChild(date_column);
        table_row.appendChild(score_column);
        table_row.appendChild(delete_button_button);
    });
}

额外优化建议 #

• 给所有DOM元素变量加上const/let声明，避免全局变量污染；
• 如果需要监听select的选择变化来更新album的score，可以添加change事件：

  scoreSelect.addEventListener('change', function() {
      album.score = parseInt(this.value);
      // 这里可以添加保存逻辑，比如存到localStorage
  });
  

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