jQuery Custom Select Box

Tabel Konten
  1. jQuery 
  2. CSS 

Pembaharuan: Posting ini sudah usang. Cek versi plugin-nya di sini

jQuery Custom Select Box

jQuery 

// Iterate over each select element
$('select').each(function() {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function() {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this line for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

CSS 

.s-hidden {
  visibility:hidden;
  padding-right:10px;
}

.select {
  cursor:pointer;
  display:inline-block;
  position:relative;
  font:normal 11px/22px Arial,Sans-Serif;
  color:black;
  border:1px solid #ccc;
}

.styledSelect {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:white;
  padding:0 10px;
  font-weight:bold;
}

.styledSelect:after {
  content:"";
  width:0;
  height:0;
  border:5px solid transparent;
  border-color:black transparent transparent transparent;
  position:absolute;
  top:9px;
  right:6px;
}

.styledSelect:active,
.styledSelect.active {
  background-color:#eee;
}

.options {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:999;
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.options li {
  padding:0 6px;
  margin:0 0;
  padding:0 10px;
}

.options li:hover {
  background-color:#39f;
  color:white;
}

Lihat Demo


Via: CSS-Tricks Forum + Sedikit Perbaikan untuk Fungsionalitas

5 Komentar

  • Unknown

    Mau nanya nih mas, kalo tutorial ini di aplikasikan untuk milih 2 program gimana mas ?

    Misalnya gini..saya kan punya widget konversi HTML dan yang satunya konversi URL.

    Nah kalo make Jquery select box ini bisa gak dipake buat milih widget mana yang mau di pake?

    Kalo bisa kan bisa ngirit tempat gitu mas, hehehehe.

  • Taufik Nurrohman

    @laudri rizal eka septian JQuery ini cuma digunakan untuk memanipulasi tampilan select box saja, sedangkan fungsionalitas penggantian mesin konverter bisa dibuat di luar fungsi di atas.

  • Unknown

    @Taufik Nurrohman oke mas, jadi yang ini cuman buat design nya aja, trus kalo buat fungsinya make yang mana mas?

    Atau kalo gak ada link referensinya atau keyword buat nyari di simbah gugel..

    • Taufik Nurrohman

      Belum mudeng ya. Misalnya begini: Kita buat sebuah tombol yang jika diklik akan mewarnai latar belakang berdasarkan nilai select box:

      $('button').on("click", function() {
      $('body').css('background-color', $('select').val());
      });

      Saat tombol diklik, maka elemen <body> akan diberi warna sesuai dengan value pada select box. Saya menggunakan JQuery .css() untuk mengubah properti latar pada <body>

      Kode di atas namanya fungsionalitas. Yaitu kode yang benar-benar berfungsi untuk membuat elemen melakukan sesuatu (dalam hal ini adalah elemen select box). Sebut saja begitu, Saya tidak tahu apa istilah yang paling benar.
      Setelah itu, tinggal dipaste saja kode custom select box-nya di bawahnya atau di atasnya untuk mengubah tampilan select box ⇒ DEMO

  • Unknown

    Mas,

    Bisa ga custom select box ini di jadikan berhubungan sehingga menjadi sebuah kesimpulan.

    Contohnya:

    1. Kotak option pertama, berisi pertanyaan:
    a. Apakah kamu Laki2 atau Perempuan?

    2. Lalu di samping kotak option pertama ada kotak option kedua, yang berisi jawaban tentang "jika visitor pilih jawaban : laki2 atau perempuan"

    3. Dan seterusnya sampai akhirnya di bawah kotak option 1 dan 2 ada kesimpulan dari jawaban visitor.

    Itu bagaimana ya mas cara membuatnya.

    Makasi Mas.

Komentar telah ditutup.