根据所选的其他选择选项更改选择选项

Question

Controller

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

My model

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

View

<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

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

I cannot display the name of the item of the selected type, for the choice of type all can be displayed in the dropdown menu. I think the error is in the script, maybe the problem has been encountered. How do I make the item name appear in the dropdown menu according to the selected type ??

Answer 1

In order to get the values dependent on the first <select> tag, make sure you have made an identity to <option value="">All</option> like id because you need to get the event of that option tag on your JS script.

First, change your JS script from (LET'S ASSUME THAT YOU ADDED an id="type" on <select> tag:

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

INTO:

 <script>
    $(document).ready(function(){
    $('#type').change(function(){
  var type_id = $(this).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="" hidden>Select State</option>');
  }
 });
</script>

NOTE: As I notice, you created a view on your model, it is not the best practice for it.

Let's see if you get through this.