ajax代码点火器双依赖下拉列表



所以我有两个下拉列表,结果将在输入文本上生成,但不知何故,如果第二个下拉列表有两个或多个选择,它生成的结果最终来自最后一个选择。也就是说,如果第一个下拉列表有A和B值,结果将来自B,尽管我选择了A,但它不会改变。这是我的代码HTML

<div class="form-group">
<label for="jurusan" class="control-label">Jurusan</label>
<select name="jurusan" id="jurusan" class="form-control">
<option selected disabled hidden>--PILIH--</option>
<?php 
$query = $this->db->query('SELECT * FROM jurusan');
$jurusan = $query->result();
foreach($jurusan as $row) {
?>
<option value="<?php echo $row->id_jurusan ?>"><?php echo $row->nama_jurusan ?></option>
<?php } ?>
</select>
<span id="pilih"></span>
<span class="help-block"></span>
</div>
<div class="form-group" id="prodi">
<label for="nama_prodi" class="control-label">Prodi</label>
<select name="prodi" id="nama_prodi" class="form-control">
</select>
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="add_kode" class="control-label">Kode Mata Kuliah</label>
<input type="text" name="kode_mata_kuliah" id="add_kode" class="form-control" placeholder="Masukkan Kode Mata Kuliah" required autocomplete="off">
<span class="help-block"></span>
</div>

这是我的jquery脚本

$('#jurusan').change(function(){
var id = $(this).val();
if(id)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data_jurusan',
method: 'post',
data: {id_jurusan: id},
dataType: 'json',
success: function(response){
$('#prodi').show();
console.log(response);
var output = [];
$.each(response,function(index,data)
{
output.push('<option value="'+data['id_prodi']+'">'+data['nama_prodi']+'</option>');
$('#nama_prodi').html(output.join(''));
var id = $('#nama_prodi').val();
if(id)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data',
method: 'post',
data: {id_prodi: id},
dataType: 'json',
success: function(response){
$('#add_kode').empty();
$('#add_kode').val((data['kode_prodi']));
}
})
}
else
{
$('#add_kode').empty();
}
});
}
});
}
else
{
$('#jurusan').empty();
}
});
var id = $('#nama_prodi').val();
if(id)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data',
method: 'post',
data: {id_prodi: id},
dataType: 'json',
success: function(response){
$('#add_kode').empty();
$('#add_kode').val((data['kode_prodi']));
}
})
}
else
{
$('#add_kode').empty();
}

控制器

public function get_data()
{ 
$post = $this->input->post();
$data = $this->mata_kuliah->get_data($post);
echo json_encode($data); 
}
public function get_data_jurusan()
{ 
$post = $this->input->post();
$data = $this->mata_kuliah->get_data_jurusan($post);
echo json_encode($data); 
}

型号

public function get_data_jurusan($post)
{
$this->db->select('*');
$this->db->where('jurusan', $post['id_jurusan']);
$query = $this->db->get('prodi');
$response = $query->result_array();
return $response;
}
public function get_data($post)
{
$this->db->select('*');
$this->db->where('id_prodi', $post['id_prodi']);
$query = $this->db->get('prodi');
$response = $query->result_array();
return $response;
}

感谢Boominathan Elango,我找到了解决方案如果循环返回的值超过1,我只需要在循环后添加条件

$('#jurusan').change(function(){
var id = $(this).val();
if(id)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data_jurusan',
method: 'post',
data: {id_jurusan: id},
dataType: 'json',
success: function(response){
$('#prodi').show();
var output = [];
$.each(response,function(index,data)
{
output.push('<option value="'+data['id_prodi']+'">'+data['nama_prodi']+'</option>');
$('#nama_prodi').html(output.join(''));
// var id = $('#nama_prodi').val();
if(Object.keys(response).length < 2)
{
var id_prodi = $('#nama_prodi').val();
if(id_prodi)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data',
method: 'post',
data: {id_prodi: id_prodi},
dataType: 'json',
success: function(response){
$('#kode').show();
$('#add_kode').empty();
$('#add_kode').val((data['kode_prodi']));
}
})
}
else
{
$('#add_kode').empty();
}
}
else
{
$('#kode').hide();
$('#nama_prodi').append('<option selected disabled hidden>--PILIH--</option>');
}
});
}
});
}
else
{
$('#jurusan').empty();
}
});
$('#nama_prodi').change(function(){
var id_prodi = $('#nama_prodi').find(":selected").val();
if(id_prodi)
{
$.ajax({
url:'<?=base_url()?>administrator/mata_kuliah/get_data',
method: 'post',
data: {id_prodi: id_prodi},
dataType: 'json',
success: function(data){
$('#kode').show();
$('#add_kode').empty();
$('#add_kode').val((data[0].kode_prodi));
}
})
}
else
{
$('#add_kode').empty();
}
});

相关内容

  • 没有找到相关文章

最新更新