How to clear selected item in listbox after clicked another emp record

See more:

Javascript

jQuery

MVC4

ASP.NET4

PROBLEM-now prob is when i click on edit button each time it will show the old value also with the new one in listbox. so how can i unselect old item from listbox.
and one more thing if want to select one more item to update record from listbox how can i do that...

What I have tried:

my view:

<div class="row">
 
    <div class="col-lg-6">

       @using (Html.BeginForm("ModuleMapping", "Setup", FormMethod.Post, new { @class = "form-horizontal"}))
        { 
    <div class="form-group">
                @Html.Label("Employee", new { @class = "control-label col-lg-4" })               
                <div class="col-lg-8">               
                 @Html.DropDownListFor(model => model.EmployeeId, new MultiSelectList(@Model.employeeList, "Id", "EmpDisplayName"), "Select Employee", new { @class = "form-control" })
               </div>
                @Html.ValidationMessageFor(m => m.EmployeeId)
            </div> 
            <div class="form-group">
                @Html.Label("Module Name", new { @class = "control-label col-lg-4" })               
                <div class="col-lg-8"> 
                @Html.ListBox("Module", new SelectList(@Model.moduleList, "Id", "Name"), new { @class = "text form-control" })
               </div>
                @Html.ValidationMessageFor(m => m.EmployeeId)
                </div>           
         <div class="col-lg-8">
                <input type="submit" id="Add" value="Add" name="Command" class="btn btn-metis-6 btn-sm" />
                 <input type="submit" id="Update" value="Update" name="Command" class="btn btn-metis-6 btn-sm" style="display:none" />
                 <input type="button" id="Reset" value="Reset" class="btn btn-metis-6 btn-sm" style="display:none" onclick="return reset();" />
                  
            </div>
   
        }


    </div></div></div>
<div class="row">
 
<table id="dataTable" class="table table-bordered table-condensed table-hover table-striped">
    <thead>
<tr>
<th>Employee</th>
<th>Module</th>
<th>Action</th>
</tr>
        </thead>
    <tbody>
        @if (Model.moduleMappedList.Count > 0)
{
    foreach (var item in Model.moduleMappedList)
    {
        <tr>
          <td>
            @item.EmployeeName
            </td>
            <td>
            @foreach (var module in item.ModuleMapList)
            {
                    @Html.DisplayFor(modelItem => module.ModuleName)<br />
            }
            </td>     
            <td>           
             <a href="#" class="btn btn-metis-5 btn-lg" data-original-title="" title="" onclick="return SelectModuleMapping(@item.EmployeeId)"><i class="glyphicon glyphicon-edit"></i></a>
            </td>
        
        </tr>
    }
}
        </tbody>

</table>

</div>
             <script src="/MobileApp/Scripts/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#dataTable').dataTable(
      {
          "sDom": '<"toolbar">frtip',
          "iDisplayLength": 25
      });
    });
    function SelectModuleMapping(id) {
        debugger;
        if (id != null) {
            $.ajax({
                type: "POST",
                url: "/MobileApp/Setup/GetModuleMapping",
                data: "{'id':" + id + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: SelectModuleMappingSuccess,
                error: SelectModuleMappingFail
            });
        }
    }
    function SelectModuleMappingSuccess(result) {
        debugger;
        //for (var i = 0; i < result.length; i++) {
        //    var list = document.getElementById("Module");
        //    list.options[result[i].ModuleId - 1].selected = false;
        //}
        var list = document.getElementById("Module");
        if (list.SelectedItem > -1)
        {
            var s = list.SelectedItem.Value;
          
            list.Items.Remove(s);
        }  
        for (var i = 0; i < result.length; i++) {
            var list = document.getElementById("Module");
            list.options[result[i].ModuleId - 1].selected = true;
            document.getElementById("EmployeeId").value = result[i].EmployeeId;
        }
        $("#Add").hide();
        $("#Update").show();
        $("#Reset").show();
    }
    function SelectModuleMappingFail() {
    }
    $('#Reset').click(function () {
        document.location = '@Url.Action("ModuleMapping","Setup")';
    });
</script>