如何将p标签内的分组项动态添加到下拉列表并实现无刷新实时更新

实现方案 #

你只需对现有代码做几处调整即可实现下拉选项动态更新，修改逻辑如下：

1. 给「Existing Group」对应的文本节点加唯一ID，方便读取默认分组内容
2. 修正提交按钮的选择器，避免和新增列按钮冲突，同时优化输入值的处理逻辑，自动过滤空值和首尾空格
3. 改造appendColumn函数，不再写死下拉选项值，每次新增列时实时读取两个区域的分组内容、合并去重后生成下拉选项

完整修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id="member_table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

 <h1>Existing Group</h1>
      <!-- 给现有分组加ID方便读取 -->
      <p id="existingGroups">IT, Cleaning, Accountant</p>
      <h1>Add New Group</h1>
      <p id="myP"></p>
      <input type="tel" id="group" name="group" placeholder="enter group name">
      <br><br>
      <!-- 给提交按钮加ID避免选择冲突 -->
      <button type="button" id="submitGroupBtn" class="btn btn-primary btn-sm">Submit</button>
   

<button onclick="javascript:appendColumn()">Add column</button>

<script>
function createSelectEl(values){
    var select = document.createElement("select");
    select.name = "group1";
    select.id = "groupId"
    // 1st option
    var option = document.createElement("option");
    option.text = 'Select One';
    select.appendChild(option);
    for (const val of values)
    {
        var option = document.createElement("option");
        option.value = val;
        option.text = val;
        select.appendChild(option);
    }
    return select;
}

let groupNum = 1;
const tableEl = document.getElementById('member_table');
const myP = document.querySelector('p#myP');

// append column to the HTML table
function appendColumn() {
  // 读取现有分组，拆分后去空格过滤空值
  const existingGroups = document.querySelector('#existingGroups').innerText.split(',').map(item => item.trim()).filter(item => item);
  // 读取新增分组，拆分后去空格过滤空值
  const newGroups = myP.innerText.split(',').map(item => item.trim()).filter(item => item);
  // 合并两个数组并去重
  const values = [...new Set([...existingGroups, ...newGroups])];

  // open loop for each row and append cell
  for (let i = 0; i < tableEl.rows.length; i++) {
    createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
  }

  tableEl.rows[0].querySelector('td:last-child').textContent = 'Group' + groupNum;
  groupNum++;
}

// create DIV element and append to the table cell
function createCell(cell, text, style) {
  var div = document.createElement('div'); // create DIV element
  div.appendChild(text);
  div.setAttribute('class', style); // set DIV class attribute
  div.setAttribute('className', style); // set DIV class attribute for IE (?!)
  cell.appendChild(div); // append DIV to the table cell
}
</script>
<script>
const submit = document.querySelector('#submitGroupBtn');
const input  = document.querySelector('input');

submit.addEventListener('click', function(e)
{
  // 拆分输入值，去空格过滤空值
  const values = input.value.split(',').map(item => item.trim()).filter(item => item);
  if (values.length === 0) return;
  
  if (myP.innerText == '')
  {
    myP.innerText = values.join(', ');
  }
  else
  {
    myP.innerText += ', ' + values.join(', ');
  }
  // 提交后清空输入框优化体验
  input.value = '';
});
</script>
</body>
</html>

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