›
Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Auto Open select dropdown

dhryasadhryasa
in Diskusi Pemrograman & IT
Sore Dweb,

Gimana ya cara buat otomotis buka select option berikutnya jika option pertama sudah dipilih. Contoh kayak booking widget traveloka saat memilih select option "guest" abis select guest maka select option yang lain otomatis kebuka.

Tagged:

Comments

  • labalabalabalaba
    edited March 2018
    chained select ?

    google aja pake keyword itu.
    mau model pake ajax, atau pure javascript, sudah banyak contohnya.

    mau sekedar pilihan berikut di-disable ... bisa
    atau di-sembunyikan ... bisa

    contoh yg sederhana itu yg model predifined.
    semua pilihan langsung ada saat halaman dibuka, hanya tampilannya disembunyikan.
    dimunculkan hanya jika dibutuhkan.
    tapi model seperti ini cuma bisa kalo pilihannya tidak banyak.

    ini model yg pilihannya sudah dalam bentuk combo, tapi di sembunyikan ... 
    <script>
      function child(n,i) {
        if(n<1) for(idx in l1) if(!isNaN(idx)) l1[idx].style.display="none";
        for(idx in l2) if(!isNaN(idx)) l2[idx].style.display="none";
        document.getElementById("child"+n+i).style.display="";
      }
    </script>

    <select onchange="child(0,this.value)">
      <option value=0>- pilih -</option>
      <option value=1>pilihan 1</option>
      <option value=2>pilihan 2</option>
      <option value=3>pilihan 3</option>
    </select>

    <select id="child01" style="display:none" onchange="child(1,this.value)" class="level1">
      <option value=0>- pilih -</option>
      <option value=1>anak 1a</option>
      <option value=2>anak 1b</option>
      <option value=3>anak 1c</option>
    </select>

    <select id="child02" style="display:none" onchange="child(2,this.value)" class="level1">
      <option value=0>- pilih -</option>
      <option value=1>anak 2a</option>
      <option value=2>anak 2b</option>
    </select>

    <select id="child03" style="display:none" onchange="child(3,this.value)" class="level1">
      <option value=0>- pilih -</option>
      <option value=1>anak 3a</option>
      <option value=2>anak 3b</option>
      <option value=3>anak 3c</option>
    </select>

    <select id="child11" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 1aA</option>
      <option value=2>anak 1aB</option>
    </select>

    <select id="child12" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 1bN</option>
      <option value=2>anak 1bM</option>
    </select>

    <select id="child13" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 1cX</option>
      <option value=2>anak 1cY</option>
    </select>

    <select id="child21" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 2aA</option>
      <option value=2>anak 2aB</option>
    </select>

    <select id="child22" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 2bN</option>
      <option value=2>anak 2bM</option>
    </select>

    <select id="child31" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 3aA</option>
      <option value=2>anak 3aB</option>
    </select>

    <select id="child32" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 3bN</option>
      <option value=2>anak 3bM</option>
    </select>

    <select id="child33" style="display:none" class="level2">
      <option value=0>- pilih -</option>
      <option value=1>anak 3cX</option>
      <option value=2>anak 3cY</option>
    </select>

    <script>
      var l1=document.getElementsByClassName("level1");
      var l2=document.getElementsByClassName("level2");
    </script>
    ini model yg pilihannya dalam bentuk array javascript, disusun jadi select hanya jika dibutuhkan ... 
    <script>
      var combo=
      [
        [
          [],
          [[1,"anak 1a"],[2,"anak 1b"],[3,"anak 1c"]],
          [[1,"anak 2a"],[2,"anak 2b"]],
          [[1,"anak 3a"],[2,"anak 3b"],[3,"anak 3c"]],
        ],
        [
          [],
          [[1,"anak 1aA"],[2,"anak 1aB"]],
          [[1,"anak 1bN"],[2,"anak 1bM"]],
          [[1,"anak 1cX"],[2,"anak 1cY"]],
        ],
        [
          [],
          [[1,"anak 2aA"],[2,"anak 2aB"]],
          [[1,"anak 2bN"],[2,"anak 2bM"]]
        ],
        [
          [],
          [[1,"anak 3aA"],[2,"anak 3aB"]],
          [[1,"anak 3bN"],[2,"anak 3bM"]],
          [[1,"anak 3cX"],[2,"anak 3cY"]],
        ]
      ];

      function child(n,i) {
        document.getElementById("level2").innerHTML="";
        if(n<1) document.getElementById("level1").innerHTML="";

        if(i>0) {
          var sl="<select"+(n==0?" onchange='child("+i+",this.value)'":"")+"><option value=0>- pilih -</option>";
          for(j=0;j<combo[n][i].length;j++) {
            sl+="<option value="+combo[n][i][j][0]+">"+combo[n][i][j][1]+"</option>";
          }
          sl+="</select>";
          document.getElementById("level"+(n==0?1:2)).innerHTML=sl;
        }
      }
    </script>

    <select onchange="child(0,this.value)">
      <option value=0>- pilih -</option>
      <option value=1>pilihan 1</option>
      <option value=2>pilihan 2</option>
      <option value=3>pilihan 3</option>
    </select>

    <span id="level1"></span>

    <span id="level2"></span>
    ndak melulu harus seperti itu ...
    model lain masih banyak.

    isi combo berikutnya juga ndak melulu harus sudah di-load saat awal buka halaman,
    bisa pake ajax buat ambil data combo berikutnya.

    itu termasuk kalo mau pake librari atau plugin atau addon atau framework atau apa pun yg lainnya :D
  • dhryasadhryasa
    edited March 2018
    Terima kasih om sudah ngasi sample script, tapi bukan chain select om labalaba, select biasa cuma jika sudah select value pertama maka otomatis dropdown select yang ke dua terbuka. contoh gambar : http://i66.tinypic.com/vcywqw.gif
  • labalabalabalaba
    edited March 2018
    itu bukan bener-bener combo select ...

    itu div,
    tepatnya ada 1 input text (+ "hiasan" panah ke bawah seperti combo select)
    dan 1 div utk pilihan "option" nya

    selebihnya bisa cuma mainan display="none" (disembunyikan) / display="" (ditampilkan)

    sebenernya bisa pake element apa pun,
    yg penting perlakuannya benar.

    contoh sederhananya cuma kaya begini : 
    <script>
      function toggleCombo(els) {
        var op=document.getElementsByClassName("option");
        var el=document.getElementById(els);
        els=el.style.display;
        for(idx in op) if(!isNaN(idx)) op[idx].style.display="none";
        if(els!="table-cell") el.style.display="table-cell";
      }
    </script>

    <style>
      .select {width:100px;}
      .option {display:none;float:left;clear:left;width:125px;}
    </style>

    <form>

      <input type="submit"><br><br>

      <span style="display:table-cell;vertical-align:top;">
        <span style="float:left;margin-right:2px;">
          <input id="selected1" type="text" value="pilih 1" class="select" onclick="toggleCombo('option1');" readonly><input type="button" value="V" onclick="toggleCombo('option1');">
        </span>
        <select name="selected1" id="option1" size="4" class="option"
          onclick="
            document.getElementById('selected1').value=this.options[this.selectedIndex].text;
            toggleCombo('option1');
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

      <span style="display:table-cell;vertical-align:top;">
        <span style="float:left;margin-left:2px;">
          <input id="selected2" type="text" value="pilih 1" class="select" onclick="toggleCombo('option2');" readonly><input type="button" value="V" onclick="toggleCombo('option2');">
        </span>
        <select name="selected2" id="option2" size="4" class="option" style="margin-left:2px;"
          onclick="
            document.getElementById('selected2').value=this.options[this.selectedIndex].text;
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

    </form>
    ... dan coba di submit ...
    yang terkirim juga sebenernya dari pilihan <select> nya sendiri yg punya "name"

    input type text dan button nya benar-benar ndak lebih dari sekedar "hiasan"
  • labalabalabalaba
    edited March 2018
    atau beneran 2-2 nya pake combo select,
    biar tampilannya beneran tetep combo select apa adanya ...
    tapi dibuat "malfunction"

    bisa pake <option> yg sama-sama lengkap ... 
    <script>
      function toggleCombo(els) {
        var op=document.getElementsByClassName("option");
        var el=document.getElementById(els);
        els=el.style.display;
        for(idx in op) if(!isNaN(idx)) op[idx].style.display="none";
        if(els!="table-cell") el.style.display="table-cell";
      }
    </script>

    <style>
      .option {display:none;float:left;clear:left;}
    </style>

    <form>

      <input type="submit"><br><br>

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected1" onmousedown="event.preventDefault();toggleCombo('option1');" style="float:left;">
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
        <select name="selected1" id="option1" size="4" class="option"
          onclick="
            document.getElementById('selected1').value=this.value;
            toggleCombo('option1');
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected2" onmousedown="event.preventDefault();toggleCombo('option2');" style="float:left;margin-left:2px;">
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
        <select name="selected2" id="option2" size="4" class="option" style="margin-left:2px;"
          onclick="
            document.getElementById('selected2').value=this.value;
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

    </form>
    ... tapi combo select yg tampil sebenernya ndak bisa di select
    karena di "malfunction"-kan pake "preventDefault()" ...
    <option> tetap lengkap supaya lebih mudah di set value nya dan lebar combo seragam.

    atau <option> nya di generate tergantung value yg dipilih ...
    tapi lebar combo mesti ditentukan sendiri berdasar teks option yg terpanjang, kalo ndak tampilannya bakal ngaco. 
    <script>
      function toggleCombo(els) {
        var op=document.getElementsByClassName("option");
        var el=document.getElementById(els);
        els=el.style.display;
        for(idx in op) if(!isNaN(idx)) op[idx].style.display="none";
        if(els!="table-cell") el.style.display="table-cell";
      }
    </script>

    <style>
      .option {display:none;float:left;clear:left;}
    </style>

    <form>

      <input type="submit"><br><br>

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected1" onmousedown="event.preventDefault();toggleCombo('option1');" style="float:left;">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected1" id="option1" size="4" class="option"
          onclick="
            document.getElementById('selected1').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option1');
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected2" onmousedown="event.preventDefault();toggleCombo('option2');" style="float:left;margin-left:2px;">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected2" id="option2" size="4" class="option" style="margin-left:2px;"
          onclick="
            document.getElementById('selected2').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>

    </form>
    tergantung elo sendiri, kreasi elo mau pake element apa ...
    bebas.
  • dhryasadhryasa
    Super deh..Lengkap banget om terima kasih ya... saya coba dulu...
  • dhryasadhryasa
    Om labalaba gimana caranya memadukan dengan jquery select nice. saya coba tidak mau kebuka select option yang ke-2. Gak tau harus ditambahing fungsi apa agar select option ke-2 kebuka.

    File element dapat dibuka di github : https://github.com/hernansartorio/jquery-nice-select

    Sample dari om labalaba dengan kombinasi sari nice select
    <link rel="stylesheet" href="css/style.css">
    <script>
      function toggleCombo(els) {
        var op=document.getElementsByClassName("nice-select");
        var el=document.getElementById(els);
        els=el.style.display;
        for(idx in op) if(!isNaN(idx)) op[idx].style.display="none";
        if(els!="table-cell") el.style.display="table-cell";
      }
    </script>
    <form method="get">
      <input type="submit"> 
     <div class="box">  
     
      <span style="display:table-cell;vertical-align:top;">
        <select id="selected1" onmousedown="event.preventDefault();toggleCombo('option1');">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected1" id="option1" size="4" class="nice-select"
          onclick="
            document.getElementById('selected1').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option1');
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>
     
      <span style="display:table-cell;vertical-align:top;">
        <select id="selected2" onmousedown="event.preventDefault();toggleCombo('option2');">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected2" id="option2" size="4" class="nice-select"
          onclick="
            document.getElementById('selected2').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option2');
          "
        >
          <option value="1" selected>pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
      </span>
     
    </form>
     </div>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nice-select.min.js"></script>
     
    <script>
    $(document).ready(function() {
      $('select').niceSelect();
    });   
    </script>
  • dhryasadhryasa
    Kenapa click tombol preview sisipan htmlnya terlihat bagus tp setelah submit keliatan berantakan ya?
  • labalabalabalaba
    edited March 2018
    ya karena nice-select sendiri ndak beneran pake combo select :D

    sama aja trick nya, combo select yg asli disembunyikan,
    librari nya sendiri bikin "combo select palsu" pake div / li.

    nih ... yg gw bold ... 
    <div class="box">

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected1" onmousedown="event.preventDefault();toggleCombo('option1');" style="display: none;">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected1" id="option1" size="4" class="nice-select" onclick="
            document.getElementById('selected1').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option1');
            toggleCombo('option2');
          " style="display: none;">
          <option value="1" selected="">pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
        
        <div class="nice-select" tabindex="0">
          <span class="current">pilih 1</span>
          <ul class="list">
            <li data-value="1" class="option selected">pilih 1</li>
            <li data-value="2" class="option">pilih 2</li>
            <li data-value="3" class="option">pilih 3</li>
            <li data-value="4" class="option">pilih 4</li>
            <li data-value="5" class="option">pilih 5</li>
            <li data-value="6" class="option">pilih 6</li>
          </ul>
        </div>
      </span>

      <span style="display:table-cell;vertical-align:top;">
        <select id="selected2" onmousedown="event.preventDefault();toggleCombo('option2');" style="display: none;">
          <option value="1">pilih 1</option>
        </select>
        <select name="selected2" id="option2" size="4" class="nice-select" onclick="
            document.getElementById('selected2').innerHTML='<option>'+this.options[this.selectedIndex].text+'</option>';
            toggleCombo('option2');
          " style="display: none;">
          <option value="1" selected="">pilih 1</option>
          <option value="2">pilih 2</option>
          <option value="3">pilih 3</option>
          <option value="4">pilih 4</option>
          <option value="5">pilih 5</option>
          <option value="6">pilih 6</option>
        </select>
        
        <div class="nice-select" tabindex="0">
          <span class="current">pilih 1</span>
          <ul class="list">
            <li data-value="1" class="option selected">pilih 1</li>
            <li data-value="2" class="option">pilih 2</li>
            <li data-value="3" class="option">pilih 3</li>
            <li data-value="4" class="option">pilih 4</li>
            <li data-value="5" class="option">pilih 5</li>
            <li data-value="6" class="option">pilih 6</li>
          </ul>
        </div>
      </span>

     </div>
    ... dan kalo elo liat ...
    semua combo select elo yg bener2 pake <select>
    semuanya ditambahin style="display: none;" oleh nice-select nya
    ... disembunyikan, yg dimunculkan div / li nya

    ya kalo sudah gitu, event yg elo tempel di combo select elo yg beneran pasti ndak dimengerti dan ndak bakal dijalankan oleh "combo select palsu" yg dibikin dari div / li ...

    elo mesti main akal-akalan lagi dengan cara yg berbeda dgn sebelumnya
    supaya yg elo mau bisa jalan.
  • dhryasadhryasa
    Masalahnya javascript & jquery gak paham om. Maunya agar pas diselect ada animation transition saat kebuka... :( Kalo misalnya susah skip aja deh om yang otomatis select next select optionnya. ketimbang stress . :tired_face:
  • labalabalabalaba
    edited March 2018
    bukan ndak bisa :D :D :D

    cuma kemungkinan elo sampai harus edit ke core nya librari yg elo pake ...

    ini gw iseng ...

    html nya jadi begini, dan gw pake librari yg memungkinkan di edit, bukan yg .min

    javascript nya juga gw ubah
    pake ID yg gw paksa gw adakan dgn mengubah koding di core librari nya. 
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nice-select.js"></script>
    <script>
      var selected1click=false;
      function toggleCombo(els) {
        if(els.attr('id')=="container-selected1") {
          $('#container-selected2').addClass('open');
          $('#container-selected2').find('.focus').removeClass('focus');
          $('#container-selected2').find('.selected').addClass('focus');
          $('#container-selected2').focus();
        }
      }
    </script>
    <form method="get">
      <input type="submit">
      <div class="box">

        <span style="display:table-cell;vertical-align:top;">
          <select name="selected1" id="selected1" class="nice-select">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

        <span style="display:table-cell;vertical-align:top;">
          <select name="selected2" id="selected2" class="nice-select">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

      </form>
    </div>
    <script>
      $(document).ready(function() {
        $('select').niceSelect();
      });
    </script>
  • labalabalabalaba
    edited March 2018
    sementara librari nya gw ubah juga ...

    jquery.nice-select.js 
    /*  jQuery Nice Select - v1.1.0
        https://github.com/hernansartorio/jquery-nice-select
        Made by Hernán Sartorio  */

    (function($) {

      $.fn.niceSelect = function(method) {

        // Methods
        if (typeof method == 'string') {
          if (method == 'update') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
              var open = $dropdown.hasClass('open');

              if ($dropdown.length) {
                $dropdown.remove();
                create_nice_select($select);

                if (open) {
                  $select.next().trigger('click');
                }
              }
            });
          } else if (method == 'destroy') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');

              if ($dropdown.length) {
                $dropdown.remove();
                $select.css('display', '');
              }
            });
            if ($('.nice-select').length == 0) {
              $(document).off('.nice_select');
            }
          } else {
            console.log('Method "' + method + '" does not exist.')
          }
          return this;
        }

        // Hide native select
        this.hide();

        // Create custom markup
        this.each(function() {
          var $select = $(this);

          if (!$select.next().hasClass('nice-select')) {
            create_nice_select($select);
          }
        });

        function create_nice_select($select) {
          $select.after($('<div id="container-'+$select.attr('id')+'"></div>')
            .addClass('nice-select')
            .addClass($select.attr('class') || '')
            .addClass($select.attr('disabled') ? 'disabled' : '')
            .attr('tabindex', $select.attr('disabled') ? null : '0')
            .html('<span class="current" id="select-'+$select.attr('id')+'"></span><ul class="list" id="option-'+$select.attr('id')+'"></ul>')
          );

          var $dropdown = $select.next();
          var $options = $select.find('option');
          var $selected = $select.find('option:selected');

          $dropdown.find('.current').html($selected.data('display') || $selected.text());

          $options.each(function(i) {
            var $option = $(this);
            var display = $option.data('display');

            $dropdown.find('ul').append($('<li></li>')
              .attr('data-value', $option.val())
              .attr('data-display', (display || null))
              .addClass('option' +
                ($option.is(':selected') ? ' selected' : '') +
                ($option.is(':disabled') ? ' disabled' : ''))
              .html($option.text())
            );
          });
        }

        /* Event listeners */

        // Unbind existing events in case that the plugin has been initialized before
        $(document).off('.nice_select');

        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);

          if(selected1click) {selected1click=false;}
          else {$('.nice-select').not($dropdown).removeClass('open');}
          $dropdown.toggleClass('open');

          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            //$dropdown.focus();
          }
        });

        // Close when clicking outside
        $(document).on('click.nice_select', function(event) {
          if ($(event.target).closest('.nice-select').length === 0) {
            $('.nice-select').removeClass('open').find('.option');
          }
        });

        // Option click
        $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
          var $option = $(this);
          var $dropdown = $option.closest('.nice-select');

          $dropdown.find('.selected').removeClass('selected');
          $option.addClass('selected');

          var text = $option.data('display') || $option.text();
          $dropdown.find('.current').text(text);

          $dropdown.prev('select').val($option.data('value')).trigger('change');

          selected1click=true;
          toggleCombo($dropdown);
        });

        // Keyboard events
        $(document).on('keydown.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
          var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));

          // Space or Enter
          if (event.keyCode == 32 || event.keyCode == 13) {
            if ($dropdown.hasClass('open')) {
              $focused_option.trigger('click');
            } else {
              $dropdown.trigger('click');
            }
            return false;
          // Down
          } else if (event.keyCode == 40) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $next = $focused_option.nextAll('.option:not(.disabled)').first();
              if ($next.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $next.addClass('focus');
              }
            }
            return false;
          // Up
          } else if (event.keyCode == 38) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
              if ($prev.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $prev.addClass('focus');
              }
            }
            return false;
          // Esc
          } else if (event.keyCode == 27) {
            if ($dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            }
          // Tab
          } else if (event.keyCode == 9) {
            if ($dropdown.hasClass('open')) {
              return false;
            }
          }
        });

        // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
        var style = document.createElement('a').style;
        style.cssText = 'pointer-events:auto';
        if (style.pointerEvents !== 'auto') {
          $('html').addClass('no-csspointerevents');
        }

        return this;

      };

    }(jQuery));
    gw cuma ubah yg gw bold ... ndak banyak.

    ... dan itu pun masih ada yg salah ...

    biarpun bisa auto open combo yg kedua,
    tapi kalo combo yg pertama di klik lagi, combo yg kedua jadi ndak otomatis ketutup.
    fokus nya juga masih salah.

    coba sendiri aja dah.

    gw cuma mau bilang, kalo mau bikin ya kemungkinannya bisa aja
  • dhryasadhryasa
    Om validasi dong penggunaan jquerynya di library nice select, saya buat kayak gini dan ditest mau tapi saya gak tau implementasinya bener apa salah, saya benar2 gagal paham sm javascript/jquery :(
    // Close second combo when fist combo or otherwise
         $(document).ready(function(){
            //selecte 1
            $("#container-selected1").click(function(){
                $("#container-selected2").removeClass("open");
            });
            //select 2
            $("#container-selected2").click(function(){
                $("#container-selected1").removeClass("open");
     
            });
        });
  • labalabalabalaba
    edited March 2018
    lha itu mau bikin apaan ?
    niatnya buat apa ?
  • dhryasadhryasa
    Kan commentnya om labalaba kalo kebuka combo yang ke dua trus pilih lagi combo pertama gak otomatis ketutup. jadi saya coba buat fungsi yang menghandle jika combo ke-2 kebuka trus klik combo yang pertama otomatis combo yang ke-2 ketutup. lengkapnya seperti librabry yang om udah udpate cuma saya tambahin fungsi lagi sperti yang di bold atau setelah comment "// Close when clicking outside"
    /*  jQuery Nice Select - v1.1.0
        https://github.com/hernansartorio/jquery-nice-select
        Made by Hernán Sartorio  */
     
    (function($) {
     
      $.fn.niceSelect = function(method) {
     
        // Methods
        if (typeof method == 'string') {
          if (method == 'update') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
              var open = $dropdown.hasClass('open');
     
              if ($dropdown.length) {
                $dropdown.remove();
                create_nice_select($select);
     
                if (open) {
                  $select.next().trigger('click');
                }
              }
            });
          } else if (method == 'destroy') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
     
              if ($dropdown.length) {
                $dropdown.remove();
                $select.css('display', '');
              }
            });
            if ($('.nice-select').length == 0) {
              $(document).off('.nice_select');
            }
          } else {
            console.log('Method "' + method + '" does not exist.')
          }
          return this;
        }
     
        // Hide native select
        this.hide();
     
        // Create custom markup
        this.each(function() {
          var $select = $(this);
     
          if (!$select.next().hasClass('nice-select')) {
            create_nice_select($select);
          }
        });
     
        function create_nice_select($select) {
          $select.after($('<div id="container-'+$select.attr('id')+'"></div>')
            .addClass('nice-select')
            .addClass($select.attr('class') || '')
            .addClass($select.attr('disabled') ? 'disabled' : '')
            .attr('tabindex', $select.attr('disabled') ? null : '0')
            .html('<span class="current" id="select-'+$select.attr('id')+'"></span><ul class="list" id="option-'+$select.attr('id')+'"></ul>')
          );
     
          var $dropdown = $select.next();
          var $options = $select.find('option');
          var $selected = $select.find('option:selected');
     
          $dropdown.find('.current').html($selected.data('display') || $selected.text());
     
          $options.each(function(i) {
            var $option = $(this);
            var display = $option.data('display');
     
            $dropdown.find('ul').append($('<li></li>')
              .attr('data-value', $option.val())
              .attr('data-display', (display || null))
              .addClass('option' +
                ($option.is(':selected') ? ' selected' : '') +
                ($option.is(':disabled') ? ' disabled' : ''))
              .html($option.text())
            );
          });
        }
     
        /* Event listeners */
     
        // Unbind existing events in case that the plugin has been initialized before
        $(document).off('.nice_select');
     
        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
     
          //$('.nice-select').not($dropdown).removeClass('open');
          $dropdown.toggleClass('open');
     
          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            $dropdown.focus();
          }
        });
     
        // Close when clicking outside
        $(document).on('click.nice_select', function(event) {
          if ($(event.target).closest('.nice-select').length === 0) {
            $('.nice-select').removeClass('open').find('.option');
          }
        });
     
       <b class="Bold"> // Close second combo when fist combo or otherwise</b>
         $(document).ready(function(){
            //selecte 1
            $("#container-selected1").click(function(){
                $("#container-selected2").removeClass("open");
            });
            //select 2
            $("#container-selected2").click(function(){
                $("#container-selected1").removeClass("open");
     
            });
        });
     
     
        // Option click
        $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
          var $option = $(this);
          var $dropdown = $option.closest('.nice-select');
     
          $dropdown.find('.selected').removeClass('selected');
          $option.addClass('selected');
     
          var text = $option.data('display') || $option.text();
          $dropdown.find('.current').text(text);
     
          $dropdown.prev('select').val($option.data('value')).trigger('change');
     
          toggleCombo($dropdown);
        });
     
        // Keyboard events
        $(document).on('keydown.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
          var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
     
          // Space or Enter
          if (event.keyCode == 32 || event.keyCode == 13) {
            if ($dropdown.hasClass('open')) {
              $focused_option.trigger('click');
            } else {
              $dropdown.trigger('click');
            }
            return false;
          // Down
          } else if (event.keyCode == 40) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $next = $focused_option.nextAll('.option:not(.disabled)').first();
              if ($next.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $next.addClass('focus');
              }
            }
            return false;
          // Up
          } else if (event.keyCode == 38) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
              if ($prev.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $prev.addClass('focus');
              }
            }
            return false;
          // Esc
          } else if (event.keyCode == 27) {
            if ($dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            }
          // Tab
          } else if (event.keyCode == 9) {
            if ($dropdown.hasClass('open')) {
              return false;
            }
          }
        });
     
        // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
        var style = document.createElement('a').style;
        style.cssText = 'pointer-events:auto';
        if (style.pointerEvents !== 'auto') {
          $('html').addClass('no-csspointerevents');
        }
     
        return this;
     
      };
     
    }(jQuery));
  • labalabalabalaba
    trus combo nya kaya apa ?
  • dhryasadhryasa
    labalaba said:



    gw cuma ubah yg gw bold ... ndak banyak.

    ... dan itu pun masih ada yg salah ...

    biarpun bisa auto open combo yg kedua,
    tapi kalo combo yg pertama di klik lagi, combo yg kedua jadi ndak otomatis ketutup.
    fokus nya juga masih salah.

    saya tambahin script yang di bold untuk menghandel comment om labalaba di atas. coba om laba2 copy script jquery.nice-select.js dengan yang saya posting di atas.

    Pertanyaan saya apakah script yang saya tambahin ke library nice-select udah benar implementasinya script yang saya buat dibagian ini "// Close second combo when fist combo or otherwise" ?


  • labalabalabalaba
    edited March 2018
    iya, tau ...

    cuma yg jadi masalah baik combo & core nya nice-select yg gw posting sudah versi terakhir yg sudah gw ubah bbrp kali.

    jadi gw ndak tau elo pake combo yg mana ...

    lha wong core nya nice-select yg elo posting aja sudah berbeda dgn posting gw terakhir ...

    ini sudah gw ubah : 
        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);

          if(selected1click) {selected1click=false;}
          else {$('.nice-select').not($dropdown).removeClass('open');}
          $dropdown.toggleClass('open');

          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            //$dropdown.focus();
          }
        });
    ada tambahan ini juga : 
          selected1click=true;
          toggleCombo($dropdown);
  • dhryasadhryasa
    oalah scriptnya udah om edit tah. saya tadi coba kalo combo ke dua terbuka trus click combo pertama, combo yang ke dua gak mau otomatis close. script om yang pertama ini
    <link rel="stylesheet" href="css/style.css">
    <form method="get">
      <input type="submit" value="submit" name="submit" />
      <div class="box">
     
        <span style="display:table-cell;vertical-align:top;">
          <select id="selected1" class="nice-select" name="adult">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>
     
        <span style="display:table-cell;vertical-align:top;">
          <select id="selected2" class="nice-select" name="room">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>
    </div>
      </form>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nice-select-custom.js"></script>
    <script>
    function toggleCombo(els) {
        if(els.attr('id')=="container-selected1") {
          $('#container-selected2').addClass('open');
          $('#container-selected2').find('.focus').removeClass('focus');
          $('#container-selected2').find('.selected').addClass('focus');
        }
    }
     
      $(document).ready(function() {
        $('select').niceSelect();
      });
    </script>
  • dhryasadhryasa
    jquery.nice-select-custom.js

    saya tambahin script setelah comment // Close second combo when fist combo or otherwise
    /*  jQuery Nice Select - v1.1.0
        https://github.com/hernansartorio/jquery-nice-select
        Made by Hernán Sartorio  */
     
    (function($) {
     
      $.fn.niceSelect = function(method) {
     
        // Methods
        if (typeof method == 'string') {
          if (method == 'update') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
              var open = $dropdown.hasClass('open');
     
              if ($dropdown.length) {
                $dropdown.remove();
                create_nice_select($select);
     
                if (open) {
                  $select.next().trigger('click');
                }
              }
            });
          } else if (method == 'destroy') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
     
              if ($dropdown.length) {
                $dropdown.remove();
                $select.css('display', '');
              }
            });
            if ($('.nice-select').length == 0) {
              $(document).off('.nice_select');
            }
          } else {
            console.log('Method "' + method + '" does not exist.')
          }
          return this;
        }
     
        // Hide native select
        this.hide();
     
        // Create custom markup
        this.each(function() {
          var $select = $(this);
     
          if (!$select.next().hasClass('nice-select')) {
            create_nice_select($select);
          }
        });
     
        function create_nice_select($select) {
          $select.after($('<div id="container-'+$select.attr('id')+'"></div>')
            .addClass('nice-select')
            .addClass($select.attr('class') || '')
            .addClass($select.attr('disabled') ? 'disabled' : '')
            .attr('tabindex', $select.attr('disabled') ? null : '0')
            .html('<span class="current" id="select-'+$select.attr('id')+'"></span><ul class="list" id="option-'+$select.attr('id')+'"></ul>')
          );
     
          var $dropdown = $select.next();
          var $options = $select.find('option');
          var $selected = $select.find('option:selected');
     
          $dropdown.find('.current').html($selected.data('display') || $selected.text());
     
          $options.each(function(i) {
            var $option = $(this);
            var display = $option.data('display');
     
            $dropdown.find('ul').append($('<li></li>')
              .attr('data-value', $option.val())
              .attr('data-display', (display || null))
              .addClass('option' +
                ($option.is(':selected') ? ' selected' : '') +
                ($option.is(':disabled') ? ' disabled' : ''))
              .html($option.text())
            );
          });
        }
     
        /* Event listeners */
     
        // Unbind existing events in case that the plugin has been initialized before
        $(document).off('.nice_select');
     
        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
     
          //$('.nice-select').not($dropdown).removeClass('open');
          $dropdown.toggleClass('open');
     
          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            $dropdown.focus();
          }
        });
     
        // Close when clicking outside
        $(document).on('click.nice_select', function(event) {
          if ($(event.target).closest('.nice-select').length === 0) {
            $('.nice-select').removeClass('open').find('.option');
          }
        });
     
        // Close second combo when fist combo or otherwise
         $(document).ready(function(){
            //selecte 1
            $("#container-selected1").click(function(){
                $("#container-selected2").removeClass("open");
            });
            //select 2
            $("#container-selected2").click(function(){
                $("#container-selected1").removeClass("open");
     
            });
        });
     
     
        // Option click
        $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
          var $option = $(this);
          var $dropdown = $option.closest('.nice-select');
     
          $dropdown.find('.selected').removeClass('selected');
          $option.addClass('selected');
     
          var text = $option.data('display') || $option.text();
          $dropdown.find('.current').text(text);
     
          $dropdown.prev('select').val($option.data('value')).trigger('change');
     
          toggleCombo($dropdown);
        });
     
        // Keyboard events
        $(document).on('keydown.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
          var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
     
          // Space or Enter
          if (event.keyCode == 32 || event.keyCode == 13) {
            if ($dropdown.hasClass('open')) {
              $focused_option.trigger('click');
            } else {
              $dropdown.trigger('click');
            }
            return false;
          // Down
          } else if (event.keyCode == 40) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $next = $focused_option.nextAll('.option:not(.disabled)').first();
              if ($next.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $next.addClass('focus');
              }
            }
            return false;
          // Up
          } else if (event.keyCode == 38) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
              if ($prev.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $prev.addClass('focus');
              }
            }
            return false;
          // Esc
          } else if (event.keyCode == 27) {
            if ($dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            }
          // Tab
          } else if (event.keyCode == 9) {
            if ($dropdown.hasClass('open')) {
              return false;
            }
          }
        });
     
        // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
        var style = document.createElement('a').style;
        style.cssText = 'pointer-events:auto';
        if (style.pointerEvents !== 'auto') {
          $('html').addClass('no-csspointerevents');
        }
     
        return this;
     
      };
     
    }(jQuery));
  • dhryasadhryasa
    tapi script om terakhir yang diedit saya test sukses otomatis tertutup combo ke-2 jika combo pertama di click.
  • labalabalabalaba
    bisa pake cara elo, tapi ya ndak di situ naruh nya ...

    jadikan satu aja di file yg ada combo nya, bukan di core nice-select nya ...
    digabung dgn : 
      $(document).ready(function() {
        $('select').niceSelect();
      });
    jadi : 
      $(document).ready(function() {
        $('select').niceSelect();

        //selecte 1
        $("#container-selected1").click(function(){
          $("#container-selected2").removeClass("open");
        });
        //select 2
        $("#container-selected2").click(function(){
          $("#container-selected1").removeClass("open");
        });
      });

    cuma ndak selesai sampai di situ ...

    coba elo buka combo pertama
    lalu pilih opsi nya pake keyboard panah atas bawah
    kalo sudah, tekan enter atau spasi

    combo kedua bakal terbuka ...
    lalu coba pilih lagi opsi di combo kedua pake keyboard panah atas bawah ...
    bisa ?

    bandingkan dgn yg gw posting terakhir ...
    pake keyboard juga ...
    bisa ?


    kalo pake cara elo, elo harus mengubah ini juga : 
      function toggleCombo(els) {
        if(els.attr('id')=="container-selected1") {
          $('#container-selected2').addClass('open');
          $('#container-selected2').find('.focus').removeClass('focus');
          $('#container-selected2').find('.selected').addClass('focus');
          $('#container-selected2').focus();
        }
      }
    ... dan ini ... 
        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);

          //$('.nice-select').not($dropdown).removeClass('open');
          $dropdown.toggleClass('open');

          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            //$dropdown.focus();
          }
        });
  • dhryasadhryasa
    Iya om, kalo pake cara 1. kalo operasinya pakai tanda panah keyword langsung ke close combo yang ke 2. Tapi script yang udah di edit om laba2 perfect.

    Makasi om udah bantuin panjang lebar..
  • labalabalabalaba
    ini yg terakhir ...

    tidak banyak merubah core nya nice-select
    supaya lain waktu bisa dipake di koding lain,
    tapi lebih fleksibel dibanding core nice-select yg asli

    semua yg berkaitan dgn id element dipindah ke file yg memang berisi id yg bersangkutan. 
    /*  jQuery Nice Select - v1.1.0
        https://github.com/hernansartorio/jquery-nice-select
        Made by Hernán Sartorio  */

    (function($) {

      $.fn.niceSelect = function(method) {

        // Methods
        if (typeof method == 'string') {
          if (method == 'update') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');
              var open = $dropdown.hasClass('open');

              if ($dropdown.length) {
                $dropdown.remove();
                create_nice_select($select);

                if (open) {
                  $select.next().trigger('click');
                }
              }
            });
          } else if (method == 'destroy') {
            this.each(function() {
              var $select = $(this);
              var $dropdown = $(this).next('.nice-select');

              if ($dropdown.length) {
                $dropdown.remove();
                $select.css('display', '');
              }
            });
            if ($('.nice-select').length == 0) {
              $(document).off('.nice_select');
            }
          } else {
            console.log('Method "' + method + '" does not exist.')
          }
          return this;
        }

        // Hide native select
        this.hide();

        // Create custom markup
        this.each(function() {
          var $select = $(this);

          if (!$select.next().hasClass('nice-select')) {
            create_nice_select($select);
          }
        });

        function create_nice_select($select) {
          $select.after($('<div id="container-'+$select.attr('id')+'"></div>')
          .addClass('nice-select')
          .addClass($select.attr('class') || '')
          .addClass($select.attr('disabled') ? 'disabled' : '')
          .attr('tabindex', $select.attr('disabled') ? null : '0')
          .html('<span class="current" id="select-'+$select.attr('id')+'"></span><ul class="list" id="option-'+$select.attr('id')+'"></ul>')
          );

          var $dropdown = $select.next();
          var $options = $select.find('option');
          var $selected = $select.find('option:selected');

          $dropdown.find('.current').html($selected.data('display') || $selected.text());

          $options.each(function(i) {
            var $option = $(this);
            var display = $option.data('display');

            $dropdown.find('ul').append($('<li></li>')
            .attr('data-value', $option.val())
            .attr('data-display', (display || null))
            .addClass('option' +
            ($option.is(':selected') ? ' selected' : '') +
            ($option.is(':disabled') ? ' disabled' : ''))
            .html($option.text())
            );
          });
        }

        /* Event listeners */

        // Unbind existing events in case that the plugin has been initialized before
        $(document).off('.nice_select');

        // Open/close
        $(document).on('click.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);

          //$('.nice-select').not($dropdown).removeClass('open');
          $dropdown.toggleClass('open');

          if ($dropdown.hasClass('open')) {
            $dropdown.find('.option');
            $dropdown.find('.focus').removeClass('focus');
            $dropdown.find('.selected').addClass('focus');
          } else {
            //$dropdown.focus();
          }
        });

        // Close when clicking outside
        $(document).on('click.nice_select', function(event) {
          if ($(event.target).closest('.nice-select').length === 0) {
            $('.nice-select').removeClass('open').find('.option');
          }
        });

        // Option click
        $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
          var $option = $(this);
          var $dropdown = $option.closest('.nice-select');

          $dropdown.find('.selected').removeClass('selected');
          $option.addClass('selected');

          var text = $option.data('display') || $option.text();
          $dropdown.find('.current').text(text);

          $dropdown.prev('select').val($option.data('value')).trigger('change');
        });

        // Keyboard events
        $(document).on('keydown.nice_select', '.nice-select', function(event) {
          var $dropdown = $(this);
          var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));

          // Space or Enter
          if (event.keyCode == 32 || event.keyCode == 13) {
            if ($dropdown.hasClass('open')) {
              $focused_option.trigger('click');
            } else {
              $dropdown.trigger('click');
            }
            return false;
            // Down
          } else if (event.keyCode == 40) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $next = $focused_option.nextAll('.option:not(.disabled)').first();
              if ($next.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $next.addClass('focus');
              }
            }
            return false;
            // Up
          } else if (event.keyCode == 38) {
            if (!$dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            } else {
              var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
              if ($prev.length > 0) {
                $dropdown.find('.focus').removeClass('focus');
                $prev.addClass('focus');
              }
            }
            return false;
            // Esc
          } else if (event.keyCode == 27) {
            if ($dropdown.hasClass('open')) {
              $dropdown.trigger('click');
            }
            // Tab
          } else if (event.keyCode == 9) {
            if ($dropdown.hasClass('open')) {
              return false;
            }
          }
        });

        // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
        var style = document.createElement('a').style;
        style.cssText = 'pointer-events:auto';
        if (style.pointerEvents !== 'auto') {
          $('html').addClass('no-csspointerevents');
        }

        return this;

      };

    }(jQuery));
  • labalabalabalaba
    edited March 2018
    combo nya sendiri jadi : 
    <link rel="stylesheet" href="css/style.css">
    <form method="get">
      <input type="submit" value="submit" name="submit" />
      <div class="box">

        <span style="display:table-cell;vertical-align:top;">
          <select id="selected1" class="nice-select" name="adult">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

        <span style="display:table-cell;vertical-align:top;">
          <select id="selected2" class="nice-select" name="room">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

      </div>
    </form>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nice-select.js"></script>
    <script>
      $(document).ready(function() {
        $('select').niceSelect();

        $("#container-selected1").click(function(){
          if(!$("#container-selected1").hasClass('open')) $("#container-selected2").removeClass("open");
        });
        $("#container-selected2").click(function(){
          $("#container-selected1").removeClass("open");
        });

        $("#option-selected1").click(function(){
          $('#container-selected2').find('.focus').removeClass('focus');
          $('#container-selected2').find('.selected').addClass('focus');
          $('#container-selected2').addClass('open');
          $('#container-selected2').focus();
        });
      });
    </script>
    semua yg menyangkut dgn id dikerjakan di sini

    jadi nice-select nya masih bisa dipakai ulang utk koding lain
    biarpun id nya berbeda
    tinggal didefinisikan sesuai kebutuhan
  • labalabalabalaba
    edited March 2018
    ini jika ingin menggunakan nice-select yg sudah di custom, tapi kembali dgn behaviour seperti aslinya : 
    <link rel="stylesheet" href="css/style.css">
    <form method="get">
      <input type="submit" value="submit" name="submit" />
      <div class="box">

        <span style="display:table-cell;vertical-align:top;">
          <select id="selected1" class="nice-select" name="adult">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

        <span style="display:table-cell;vertical-align:top;">
          <select id="selected2" class="nice-select" name="room">
            <option value="1" selected>pilih 1</option>
            <option value="2">pilih 2</option>
            <option value="3">pilih 3</option>
            <option value="4">pilih 4</option>
            <option value="5">pilih 5</option>
            <option value="6">pilih 6</option>
          </select>
        </span>

      </div>
    </form>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nice-select.js"></script>
    <script>
      $(document).ready(function() {
        $('select').niceSelect();

        $('.nice-select').click(function(){
          $('.nice-select').not($(this)).removeClass('open');
        });
      });
    </script>
  • dhryasadhryasa
    Terima kasih om labalaba, saya coba dulu ya.
Sign In or Register to comment.