How to make a selection list to null in runtime?

Question

I have a code that fetches a list from DB. Using that returned array i am creating a grid table and two combo boxes dynamically. Now, the code is working fine for first time. I can also able to add new entry to the database and show it in the grid. Now the problem is with the combo box.

Whenever i add a new entry, the table gets updated by deleting the previous content in the table and fetching again from the DB along with new entry. But the combo options get appended with the newly arrived data. See, the image. Chemical Engg is newly addded.

But i dont know to reset or delete existing combo box contents. I know that the solution is a piece of code that makes the combo box null. It has to be placed on the top of combo box generation code. *So, that it ll reset every time before generating new elements.*

My question is how to make that combo box null in the starting point.(I dont know what exact term is "null" or "reset", i new to DOM elements).

Here my Code.

The HTML ELEMENT:

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

The Script: Its DWR Call... I think the problem comes below the grid.

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

How shall i reset?

Any suggestions would be more appreciative

Thanks in advance!!!

Answer 1

Try deleting each element in the select:

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

Are you also not able to set the select box properly?