如何实现向<p>标签动态添加内容并同步更新下拉列表选项

实现思路 #

• 首先修正原代码的基础问题：原代码中输入框和下拉选择框的id均为group，属于DOM id冲突，会导致选择元素出错；另外输入分组名称用type="tel"不合适，改为type="text"
• 给需要操作的DOM元素添加唯一标识，方便快速获取：比如新增分组展示的p标签加id="newGroupShow"，提交按钮加id="submitBtn"，下拉选择框改id="groupSelect"，输入框改id="newGroupInput"
• 全局维护一个分组列表数组，初始化时存入默认的三个固定分组，所有数据更新都基于这个数组操作，保证展示和下拉选项的数据一致性
• 给提交按钮绑定点击事件，触发时按顺序执行：
  1. 获取输入框内容，去除首尾空格，判断是否为空、是否已存在同名分组，不符合要求直接终止操作
  2. 验证通过后将新分组名推入全局数组
  3. 筛选出所有新增分组（排除初始的三个固定分组），用逗号拼接后写入新增分组展示的p标签
  4. 清空下拉选择框的原有选项，遍历全局分组数组，逐个生成option元素插入到下拉框中
  5. 清空输入框内容，方便下一次输入

完整实现代码 #

<!DOCTYPE html>
<html>
<body>
  <h1>Existing Group</h1>
  <p id="defaultGroup">IT, Cleaning, Accountant</p>
  <h1>Add New Group</h1>
  <p id="newGroupShow"></p>
  <input type="text" id="newGroupInput" name="group" placeholder="enter group name">
  <br><br>
  <button type="button" id="submitBtn" class="btn btn-primary btn-sm">Submit</button>
  <h1>Drop Down List</h1>
  <label for="groupSelect">Choose a group:</label>
  <select name="group" id="groupSelect">
    <option value="IT">IT</option>
    <option value="Cleaning">Cleaning</option>
    <option value="Accountant">Accountant</option>
  </select>

  <script>
    // 初始化分组数组
    const defaultGroups = ['IT', 'Cleaning', 'Accountant']
    let allGroups = [...defaultGroups]
    // 获取DOM元素
    const newGroupInput = document.getElementById('newGroupInput')
    const submitBtn = document.getElementById('submitBtn')
    const newGroupShow = document.getElementById('newGroupShow')
    const groupSelect = document.getElementById('groupSelect')

    // 提交按钮点击事件
    submitBtn.addEventListener('click', () => {
      const inputVal = newGroupInput.value.trim()
      // 校验非空
      if (!inputVal) return
      // 校验不重复
      if (allGroups.includes(inputVal)) {
        alert('该分组已存在')
        return
      }
      // 加入数组
      allGroups.push(inputVal)
      // 更新新增分组展示
      const newGroups = allGroups.filter(item => !defaultGroups.includes(item))
      newGroupShow.innerText = newGroups.join(', ')
      // 更新下拉框
      groupSelect.innerHTML = ''
      allGroups.forEach(group => {
        const option = document.createElement('option')
        option.value = group
        option.innerText = group
        groupSelect.appendChild(option)
      })
      // 清空输入框
      newGroupInput.value = ''
    })
  </script>
</body>
</html>

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