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

我正在使用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>

$（文档）.ready（函数（）{
$（“.dropdown”）。单击（函数（）{
$（“.dd”）.remove（）；
$（this.load（'/ajax/dropdown'）；
$（this）.removeClass（'dropdown'）.addClass（'down'）；
})
});

要更改的字段：

<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>

员工

替换代码：

<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>

选择雇员：

单击单元格时，我收到以下错误消息：

[违规]将非被动事件侦听器添加到滚动块 “鼠标滚轮”事件。将事件处理程序标记为“被动” 使页面更具响应性

但我还没有发现“违规”和这个问题之间有任何关系。现在我不确定这个问题是否只与javascript有关，或者spring或thymeleaf中的其他地方是否有问题