javascript - 如何在运行时将选择列表设置为空？

Question

我有一个从数据库获取列表的代码。 使用返回的数组，我动态创建一个网格表和两个组合框。现在，代码第一次运行良好。我还可以向数据库添加新条目并将其显示在网格中。现在问题出在组合框上。

每当我添加新条目时，表都会更新，方法是删除表中以前的内容并再次从数据库中获取新条目。 但是组合选项会附加新到达的数据。看，图像。 新增化学工程。

但我不知道重置或删除现有的组合框内容。我知道解决方案是一段使组合框为空的代码。 它必须放置在组合框生成代码的顶部。 因此，每次生成新元素之前它都会重置。

我的问题是如何在起点使该组合框为空。(我不知道确切的术语“空”或“重置”是什么，我对 DOM 元素还不熟悉)。

这是我的代码。

HTML 元素:

<select id="departmentField" >//Both using same data source. 
<select id="searchDepartments">

脚本: 它的DWR调用...我认为问题出在网格下面。

    EmployeeManagement.getDeptList(function(deptRecords) {
    $("#depts").clearGridData(true);
    $("#depts").jqGrid('addRowData', "deptID", deptRecords);

    var deptSearchSelect = document.getElementById('searchDepartments');
    var searchOptions = null;
    searchOptions = document.createElement('option');
    searchOptions.value = 0;
    searchOptions.innerHTML = "ALL";
    deptSearchSelect.appendChild(searchOptions);

    var depFieldSelect = document.getElementById('departmentField');
    var deptFieldOpts = null;
    deptFieldOpts = document.createElement('option');
    deptFieldOpts.value = 0;
    deptFieldOpts.innerHTML = "";
    depFieldSelect.appendChild(deptFieldOpts);

    for(i = 0; i<deptRecords.length; i++) { 


        var dept = deptRecords[i];
        searchOptions = document.createElement('option');
        searchOptions.value = dept.deptID;
        searchOptions.innerHTML = dept.deptName;
        deptSearchSelect.appendChild(searchOptions);

        deptFieldOpts = document.createElement('option');
        deptFieldOpts.value = dept.deptID;
        deptFieldOpts.innerHTML = dept.deptName;
        depFieldSelect.appendChild(deptFieldOpts);

    }

    deptSearchSelect.selectedIndex = "ALL";
    deptSearchSelect.selectedIndex = "";

    //var respDiv = document.getElementById("respCheck");
});

我该如何重置？

如有任何建议，我们将不胜感激

提前致谢!!!

Answer 1

尝试删除select中的每个元素:

while(deptSearchSelect.hasChildNodes()) {
    deptSearchSelect.removeChild(deptSearchSelect.firstChild);
}
while(depFieldSelect.hasChildNodes()) {
    depFieldSelect.removeChild(depFieldSelect.firstChild);
}

您是否也无法正确设置选择框？