Populating select option bug Javascript

Question

I am working on a school management system and after working on all the bugs this is the one I can't seem to fix! In my system you can select from a drop down, the Parents of the child (Father and Mother), the information saves into the db correctly but upon editing/viewing there is an issue.

After you close the modal for the first child and move onto the 2nd and then back to the first the father and mother show the previous child's parental data.

I have tried clearing the value of the select/ unselecting the drop down prior to it being populated by ajax but to no avail. Here is the code and it only executes whenever you select the edit button on the childs row:

$.ajax({
            url: base_url + 'student/fetchStudentData/'+studentId,
            type: 'post',
            cache: false,
            dataType: 'json',
            success:function(response){

                // UNSELECT THE DROP DOWNS TO RESET             
                //$('#editSex').find("option:selected").prop('selected',false);
                //$('#editFatherId').find("option:selected").prop('selected',false);
                //$('#editMotherId').find("option:selected").prop('selected',false);

                $("#editFname").val(response.fname);
                $("#editLname").val(response.lname);
                $("#editDob").val(response.dob);

                // NOW SELECT THE OPTION
                $('#editSex option[value='+ response.sex +']').attr('selected','selected');
                $('#editFatherId option[value='+ response.father_id +']').attr('selected','selected');
                $('#editMotherId option[value='+ response.mother_id +']').attr('selected','selected');

                $("#editAge").val(response.age);
                $("#editContact").val(response.contact);
                $("#editEmail").val(response.email);
                $("#editAddress").val(response.address);
                $("#editCity").val(response.city);
                $("#editCountry").val(response.country);
                $("#editRegisterDate").val(response.register_date);
                $("#editClassName").val(response.class_id);

                $("#editSectionName").load('student/fetchClassSection/'+response.class_id, function(i) {
                    $("#editSectionName").val(response.section_id);
                });             

                $("#student_photo").attr('src', base_url + response.image);

                $("#editClassName").unbind('change').bind('change', function() {
                    var class_id = $(this).val();
                    $("#editSectionName").load('student/fetchClassSection/'+class_id);
                });

HTML AND PHP:

        <!-- FATHER -->
        <div class="form-group">
          <label for="editFatherId" class="col-sm-4 control-label">Father</label>
          <div class="col-sm-8">
            <select class="form-control" name="editFatherId" id="editFatherId">
            <option value="">Select</option>
            <?php foreach ($parentsDataMale as $key => $value) { ?>
              <option value="<?php echo $value['parents_id'] ?>"><?php echo $value['fname'] . ' ' . $value['lname'] ?></option>
            <?php } // /forwach ?>
          </select>
          </div>                  
        </div>

        <!-- MOTHER -->
        <div class="form-group">
          <label for="editMotherId" class="col-sm-4 control-label">Mother</label>
          <div class="col-sm-8">
            <select class="form-control" name="editMotherId" id="editMotherId">
            <option value="">Select</option>
            <?php foreach ($parentsDataFemale as $key => $value) { ?>
              <option value="<?php echo $value['parents_id'] ?>"><?php echo $value['fname'] . ' ' . $value['lname'] ?></option>
            <?php } // /forwach ?>
          </select>
          </div>                  
        </div>

IMAGES OF ISSUE: FIRST CHILD:

SECOND CHILD:

BACK TO FIRST:

Answer 1

You should "deselect" all options before "selecting" one using the json data. Else, you risk having more than one selected... And that's odd.

Also, use the boolean property instead of playing with the attribute.

// NOW SELECT THE OPTION
$('#editSex option').prop('selected',false);
$('#editSex option[value='+ response.sex +']').prop('selected',true);
$('#editFatherId option').prop('selected',false);
$('#editFatherId option[value='+ response.father_id +']').prop('selected',true);
$('#editMotherId option').prop('selected',false);
$('#editMotherId option[value='+ response.mother_id +']').prop('selected',true);

Answer 2

Instead of using

 $('#editSex option[value='+ response.sex +']').attr('selected','selected');
 $('#editFatherId option[value='+ response.father_id +']').attr('selected','selected');
 $('#editMotherId option[value='+ response.mother_id +']').attr('selected','selected');

Try

$('#editSex').val(response.sex);
$('#editFatherId ').val(response.father_id );
$('#editMotherId ').val(response.mother_id );

If you want to use what you are already using, try using prop to true

    $('#editSex option[value='+ response.sex +']').prop('selected',true);
    $('#editFatherId option[value='+ response.father_id +']').prop('selected',true);
    $('#editMotherId option[value='+ response.mother_id +']').prop('selected',true);