Question

控制器

public function tambah()
{
    $data['judul'] = 'Form Tambah Data Barang';
    $data['type'] = $this->Gudang_model->getTypeQuery();
    $data['suplier'] = $this->Gudang_model->getSuplierQuery();
    $data['kode'] = $this->Gudang_model->getKodeMasuk();

    $this->form_validation->set_rules('masuk_kode', 'Kode', 'required');
    $this->form_validation->set_rules('type_id', 'Type', 'required');
    $this->form_validation->set_rules('barang_id', 'Nama Barang', 'required');
    $this->form_validation->set_rules('masuk_jumlah', 'Jumlah', 'required|numeric');
    $this->form_validation->set_rules('masuk_tanggal', 'Tanggal', 'required');
    $this->form_validation->set_rules('keterangan', 'Keterangan', 'required');
    $this->form_validation->set_rules('suplier_id', 'Suplier', 'required');

    if($this->form_validation->run() == FALSE)
    {
        $this->load->view('templates/header', $data);
        $this->load->view('gudang/tambah', $data);
        $this->load->view('templates/footer');  
    } else {
        $this->Gudang_model->tambahDataBarang();
        $this->session->set_flashdata('flash', 'Ditambahkan');
        redirect('gudang/tambah');
    }
}

public function fetch_barang()
{
 if($this->input->post('type_id'))
 {
  echo $this->Gudang_model->getNamaQuery($this->input->post('type_id'));
 }
}

我的模型

public function getNamaQuery($type_id)
    {
        $this->db->where('type_id', $type_id);
        $this->db->order_by('barang_name', 'ASC');
        $query = $this->db->get('barang');
        $output = '<option value="">Select State</option>';
        foreach($query->result() as $row)
        {
         $output .= '<option value="'.$row->barang_id.'">'.$row->barang_name.'</option>';
        }
        return $output;
    }

查看

<div class="form-group col-md-3">
                        <select class="form-control" id="type_id" name="type_id">
                            <option value="">All</option>
                              <?php foreach($type as $types) : ?>
                                   echo '<option value="<?php echo "$types->type_id"?>"><?php echo "$types->type_nama"?></option>';
                              <?php endforeach ?>
                        </select>
                        <small class="form-text text-danger"><?= form_error('type_id') ?></small>
                    </div>
                    <div class="form-group col-md-3">
                        <select class="form-control" name="barang_id" id="barang_id">
                            <option value="">Please Select</option>
                        </select>
                        <small class="form-text text-danger"><?= form_error('barang_id') ?></small>
                    </div>

脚本

<script>
$(document).ready(function(){
 $('#type').change(function(){
  var type_id = $('#type').val();
  if(type_id != '')
  {
   $.ajax({
    url:"<?php echo base_url(); ?>gudang/fetch_barang",
    method:"POST",
    data:{type_id:type_id},
    success:function(data)
    {
     $('#barang').html(data);
    }
   });
  }
  else
  {
   $('#barang').html('<option value="">Select State</option>');
  }
 });
</script>

我无法显示所选类型的项目的名称，因为所有类型的选择都可以在下拉菜单中显示。我认为错误出在脚本中，也许是遇到了问题。如何根据所选类型使项目名称显示在下拉菜单中？

Answer 1

为了获取依赖于第一个<select>标记的值，请确保已像<option value="">All</option>一样标识id，因为您需要获取该{{ 1}}上。

首先，从（假设您在option tag标签上添加了id="type"来更改JS脚本：

<select>

INTO：

<script>
$(document).ready(function(){
$('#type').change(function(){
var type_id = $('#type').val();
  if(type_id != '')
  {
   $.ajax({
    url:"<?php echo base_url(); ?>gudang/fetch_barang",
    method:"POST",
    data:{type_id:type_id},
    success:function(data)
    {
     $('#barang').html(data);
    }
   });
  }
  else
  {
   $('#barang').html('<option value="">Select State</option>');
  }
 });
</script>

注意：：我注意到，您在模型上创建了一个视图，但这并不是最佳实践。

让我们看看您是否能解决这个问题。

Answer 2

尝试像这样修改您的javascript块：

<script>
$(document).ready(function(){
    $('#type_id').change(function(){ // changed '#type' to '#type_id'
    var type_id = $('#type_id').val(); // changed '#type' to '#type_id'
    if(type_id != '')
    {
    $.ajax({
        url:"<?php echo base_url(); ?>gudang/fetch_barang",
        method:"POST",
        data:{type_id:type_id},
        success:function(data)
        {
        $('#barang_id').html(data); // changed '#barang' to '#barang_id'
        }
    });
    }
    else
    {
    $('#barang_id').html('<option value="">Select State</option>'); // changed '#barang' to '#barang_id'
    }
    });
}); // previously missing closing bracket
</script>

请注意，您以前还缺少js脚本的右括号。

根据所选的另一个选择选项更改选择选项

2 个答案: