使用jquery呈现的下拉列表被阻止（用户无法选择选项）

Question

我正在使用Spring和thymeleaf创建一个带有表单的小页面。下面有一个表格，其中带有字段的td必须显示从其他地方使用ajax加载的下拉列表。显示下拉列表，但用户无法选择选项，因为它会自行重置。

的Javascript ：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" th:inline="javascript">
$(document).ready(function() {
     $(".dropdown").click(function() {
            $(".dd").remove();
        $(this).load('/ajax/dropdown');
        $(this).removeClass('dropdown').addClass('down');
        })
});
</script>

要更改的字段：

<td class="dropdown" th:text="${device.getEmployee()}">Employee</td>
<input class="dd" type="hidden" name="employee" th:value="${device.getEmployee().getId()}"/>

替换代码：

<div th:fragment="cambiodd" id="cambio">
    <select name="employee">
        <option value="">Seleccionar empleado:</option>
        <option th:each="employee : ${lemp}"
                th:value="${employee.getId()}"
                th:text="${employee.getId()}+' : '+${employee.getName()}"></option>
    </select>
</div>

单击单元格时出现以下错误消息：

  

[违规]为滚动阻止添加了非被动事件侦听器   'mousewheel'事件。考虑将事件处理程序标记为“被动”   使页面更具响应性。

但我没有发现“违规”与问题之间存在任何关系。现在我不确定问题是否只能用javascript进行，或者春天或百里香的其他地方是否有问题。