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:

Please create a Minimal, Complete, and Verifiable example of your problem — Liam
– Liam, Commented Sep 5, 2018 at 9:11
Where are you populating the select elements like #editSex, #editLname and #editMotherId ? — Muhammad Osama
– Muhammad Osama, Commented Sep 5, 2018 at 9:19
Are that already populated and you are just selecting the values coming from database or you are populating them as well? — Muhammad Osama
– Muhammad Osama, Commented Sep 5, 2018 at 9:20
That isn't a MCVE. We need full recreation steps, so your HTML, etc. The block of code you've added is only marginally helpful. An imagine of your HTML doesn't help at all — Liam
– Liam, Commented Sep 5, 2018 at 9:23

Louys Patrice Bessette · Accepted Answer · 2018-09-05 09:43:59Z

3

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

edited Sep 5, 2018 at 9:43

answered Sep 5, 2018 at 9:34

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Enoch Over a year ago

Hey thumbs up your answer solved the issue, It was close to what I was doing, thanks for all the help. Between yo, Mohammed and Liam, you resolved my issues. Sorry for not so being helpful in my question!

Louys Patrice Bessette Over a year ago

That wasn't a behavior easy to explain... Happy it helped.

Liam · Accepted Answer · 2018-09-05 09:37:49Z

3

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

edited Sep 5, 2018 at 9:37

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Sep 5, 2018 at 9:36

Muhammad Osama

1,0571 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Populating select option bug Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related