Generic placeholder image

Membuat slider di sebelah text (bootstrap)

Ditanyakan pada tanggal 11 January 2019 oleh Patar Ebenezer Siahaan

Ini tampilan view dan sudah muncul kategori ketika dropdown kota dipilih

<b>City:</b>
<select id="kota">
    <option value="">Select City</option>
    <?php foreach ($kota as $key):?>
        <option value="<?= $key->kota_id?>"><?= $key->nama_kota?></option>
    <?php endforeach; ?>
</select>

<div id="kategori">

</div>

ini script untuk merubah yang dipilih di dropdown

<script>
  $(document).ready(function(){
    $('#kota').change(function(){
      var kota_id = $('#kota').val();
      if(kota_id != '')
      {
        $.ajax({
          url:"<?php echo base_url();?>c_client_side/perjalanan/ambil_kategori",
          method: "POST",
          data:{kota_id:kota_id},
          success:function(data)
          {
            $('#kategori').html(data);
          }
        });
      }
    });
  });
</script>

Pertanyaannya gimana cara nambahin slider di sebelah kanan tulisan kategori nya ya ?

Comment ..

maksudnya slider kayak gimana? image slider atau bar slider? Kalo lihat kodenya, seharusnya isi dari elemen #kategori berubah setiap kali dropdown diganti

Dikomentari 6 hari yang lalu oleh Toni Haryanto
Comment ..

bar slider mas. iya mas, sudah bisa kok. tinggal gimana caranya nambahin bar slider nya disamping,

Dikomentari 6 hari yang lalu oleh Patar Ebenezer Siahaan
Comment ..

ini code yang udah tampil mas, nama nama kategorinya aja. ini saya buat di model

function pilih_kategori($kota_id)
    {
        $this->db->where('kota_id', $kota_id);
        $this->db->order_by('nama_kategori', 'ASC');
        $query = $this->db->get('table_kategori');
        $output = '';
        foreach ($query->result() as $key) {
            $output .= '<div class="title">'.$key->nama_kategori.'</div>';
            // $output .= '<option value="'.$key->kategori_id.'">'.$key->nama_kategori.'</option>';
        }
        return $output;
    }
Dikomentari 6 hari yang lalu oleh Patar Ebenezer Siahaan

1 JAWABAN

Generic placeholder image
Dijawab 6 hari yang lalu oleh Toni Haryanto

Untuk menambahkan elemen ke dalam elemen lain kamu tinggal gunakan saja method .html(). Sedangkan untuk menambahkan elemen setelah elemen yang sudah ada, kamu dapat menggunakan .append(). Misalkan kamu sudah menambahkan html ke dalam elemen #kategori, maka untuk menambahkan elemen lain, kamu bisa buat seperti ini:

success:function(data)
{
    $('#kategori').html(data);
        var slider = "masukin tag slidernya disini";
        $('#kategori').append(slider); // slider akan ditambahkan setelah data dari baris sebelumnya
}