填充选择选项错误Javascript
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了填充选择选项错误Javascript相关的知识,希望对你有一定的参考价值。
我正在研究学校管理系统,在处理完所有错误后,这是我似乎无法修复的问题!在我的系统中,您可以从下拉菜单中选择孩子的父母(父亲和母亲),信息正确保存到数据库中,但在编辑/查看时存在问题。
关闭第一个孩子的模态并移到第二个孩子然后回到第一个孩子后,父亲和母亲显示前一个孩子的父母数据。
我已经尝试清除选择/取消选择下拉列表之前由ajax填充的值,但无济于事。这是代码,它只在您选择子行上的编辑按钮时执行:
$.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);
);
<!-- 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>
答案
在使用json数据“选择”之前,您应该“取消选择”所有选项。否则,你冒险选择多个......而且这很奇怪。
此外,使用布尔属性而不是使用属性。
// 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);
另一答案
而不是使用
$('#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);
以上是关于填充选择选项错误Javascript的主要内容,如果未能解决你的问题,请参考以下文章