下拉框数据遭默认元素覆盖，Ajax追加选项无法显示

我编写了如下下拉框HTML结构，同时在JS中实现了Ajax成功回调，用于将接口返回数据追加为下拉框选项。但运行时下拉框出现额外的默认HTML元素与选项，覆盖了Ajax追加的内容，点击下拉框无法看到正常选项，且控制台无报错信息。

相关代码 #

HTML结构 #

<div class="col s4">
    <label class="control-label flabels">Name</label>
    <div class="asteRisk">*</div>
    <div class="row d-flex align-items-center">
        <div id="FLevelRow" class="row">
            <div class="select-wrapper">
                <div class="form-group">
                    <div class="multipleSelection" id="TaskName">
                        <select required class="dynamic_Time form-control" id="TaskSKAdd">
                            <option value="">--Select--</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ajax成功回调代码 #

success: function (response) {           
    console.log("Lookupresponse", response)
    for (var application of response) {
        var value = application.NAME.toLowerCase();
        $('#TaskName .dynamic_Time')
            .append(`<option value="${application.id}" name="${value}">${value} </option>`);
    }          
},

问题排查与解决方法 #

1. 解决UI组件DOM不同步问题 #

从select-wrapper、multipleSelection这类类名来看，你大概率使用了自定义下拉组件或第三方UI框架（比如Materialize）。这类组件会隐藏原生<select>元素，生成自己的模拟DOM结构来渲染下拉框。你直接往原生<select>追加选项后，组件没有同步更新，导致新选项仅存在于原生DOM，但前端显示的是组件生成的旧结构。

• 如果使用Materialize框架，在追加选项后调用组件更新方法：

  success: function (response) {           
      console.log("Lookupresponse", response)
      // 清空除默认选项外的内容
      $('#TaskSKAdd').find('option:not([value=""])').remove();
      for (var application of response) {
          var value = application.NAME.toLowerCase();
          $('#TaskSKAdd')
              .append(`<option value="${application.id}" name="${value}">${value}</option>`);
      }
      // 更新Materialize下拉组件
      $('#TaskSKAdd').formSelect();
  },
  

• 如果是自定义multipleSelection组件，找到组件的初始化/更新方法，在追加选项后重新调用，或者直接操作组件生成的DOM来添加选项。

2. 避免重复元素生成 #

检查页面是否存在下拉框结构重复渲染的情况（比如Ajax回调被多次触发、组件重复初始化）。可以在追加选项前清空原生<select>的非默认选项，避免重复添加：

// 清空除默认--Select--外的所有选项
$('#TaskSKAdd').find('option:not([value=""])').remove();

3. 定位额外元素来源 #

打开浏览器开发者工具（F12），查看下拉框区域的DOM结构：

• 找到那些“额外默认元素”，查看它们的类名、父节点，确认是UI组件自动生成的，还是代码逻辑重复创建的。
• 如果是组件生成的，确保仅初始化一次组件，不要在每次Ajax请求后重复初始化。

4. 简化选择器减少错误 #

原选择器$('#TaskName .dynamic_Time')可简化为直接使用ID选择器$('#TaskSKAdd')（因为<select>有唯一ID），降低选择错误的概率。

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