填充選擇選項錯誤Javascript

Question

我正在使用學校管理系統，並且在處理了所有錯誤之后，這似乎是我無法修復的錯誤！ 在我的系統中，您可以從下拉列表中選擇孩子的父母（父親和母親），信息正確保存到數據庫中，但是在編輯/查看時會出現問題。

關閉第一個孩子的模式后，移至第二個，然后返回第一個，父母將顯示前一個孩子的父母數據。

我曾嘗試清除選擇/取消選擇下拉列表的值，然后再由ajax填充它，但無濟於事。 這是代碼，它僅在您選擇childs行上的edit按鈕時才執行：

$.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和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>

問題圖像：第一胎：

第二名：

回到第一：

Answer 1

在使用json數據“選擇”一個選項之前，您應該“取消選擇”所有選項。 否則，您可能會選擇多個風險...這很奇怪。

另外，請使用boolean屬性而不是使用該屬性。

// 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

而不是使用

 $('#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');

嘗試

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

如果要使用已經使用的內容，請嘗試使用prop為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);