Cara Menyeleksi Jamak Pada Select Option dengan Jquery

Maksud dari judul di atas adalah jadi ketika saya memilih lebih dari satu option kita juga bisa menampilkan langsung sekaligus, maka dari itu disini kita akan mencoba belajar cara menyeleksi jamak pada select option dengan jquery, oke bagaimana cara membuatnya simak terus ya teman-teman.

oiya sebelum cara menyeleksi jamak pada select option dengan jquery, apakah teman-teman sudah paham maksud dari select dan option yang saya tulis di atas, jika belum jadi kedua itu adalah sebuah tag HTML dimana di gunakan untuk membuat sebuah pilihan yang sudah tersedia, oke supaya tambah paham jika teman-teman pernah buka sebuah facebook.com pada tampilan login, di bawah itu ada sebuah register dimana kita harus menginputkan sebuah tanggal ya, dan itu lah yang di maksud dengan select option. jadi jika di sebuah form register facebook kita disuruh memilih tanggal lahir, dan hanya bisa satu bukan, tetapi disini kita bisa menginputnya lebih dari satu ya. oke langsung saja kita lihat kode berikut ini:

<html>
  <head>
    <title>Cara Menyeleksi Jamak Pada Select Option dengan Jquery</title>
    
	<style type="text/css">
    .error { color: red; padding-left: 10px; }
    .submit { margin-left: 100px; margin-top: 10px;}
    form{margin: auto;width: 500px; border: 1px solid red; padding: 10px; border-radius: 20px;}
    h1{text-align: center;}
  </style>

  </head>
  <body>

<form>
  <h1>Cara Menyeleksi Jamak Pada Select Option dengan Jquery</h1>
  <table>
    <tr>
      <td>
        Silahkan Order
      </td>
      <td>
        <select id="makanan" class="kotak_info" MULTIPLE>
          <option value="0">Pilih Sedikitnya satu Pakaian</option>
          <option value=" Baju Kerja Wanita">Baju Kerja Wanita</option>
          <option value=" Dress">Dress</option>
          <option value="kimono">kimono</option>
          <option value="Daster">Daster </option>
          <option value="Blazer">Blazer</option>
          <option value="Baju Tidur">Baju Tidur</option>
          <option value="Baju Lebaran">Baju Lebaran </option>
        </select>
      </td>
    </tr>
  </table>
  <p class="error">Anda tidak memilih satupun opsi</p>
  <p class="pesanan"></p>
  <input class="submit" type="submit" value="Order">
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('.error').hide();
  $('.submit').click(function(e){
    var hitung = $('select option:selected').val();
    if(hitung == 0)
    {
      $('p.pesanan').hide();
      $('.error').show();
    }
    else
    {
      $('.error').hide();
      $('p.pesanan').show();
      $('p.pesanan').html('Anda telah memilih <strong> ' + $(' select option:selected ').text() + '. </strong>');
    }
    e.preventDefault();
  });
});
</script>
  </body>
</html>

Oke cukup panjang ya, bisa di liat saya menggunakan kasus untuk teman-teman memilih sebuah pakaian wanita ya, jadi teman-teman bisa memilih lebih dari satu ya, dan sekarang kita lihat hasilnya:

Untuk memilih dua sekaligus teman-teman silahkan pilih dengan cara tahan keyboard CTRL + click yang di pilih, menarik ya, dan di bawah itu adalah hasil jadinya, dan saya rasa cukup sampai disini dulu belajar cara menyeleksi jamak pada select option dengan jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Menyeleksi Jamak Pada Select Option dengan Jquery

Kategori