如何在运行时将选择列表设为null？

Question

我有一个从DB中获取列表的代码。 使用返回的数组我正在创建一个网格表和两个动态组合框。现在，代码第一次正常工作。我还可以向数据库添加新条目并在网格中显示它。现在问题在于组合框。

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

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

我的问题是如何在起点上使该组合框为空。（我不知道确切的术语是“null”或“reset”，我是DOM元素的新手。）

这是我的代码。

HTML ELEMENT：

<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);
}

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