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!
Auto Open select dropdown
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.
Comments
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 ... ini model yg pilihannya dalam bentuk array javascript, disusun jadi select hanya jika dibutuhkan ... 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
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 : ... 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"
biar tampilannya beneran tetep combo select apa adanya ...
tapi dibuat "malfunction"
bisa pake <option> yg sama-sama lengkap ... ... 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. tergantung elo sendiri, kreasi elo mau pake element apa ...
bebas.
File element dapat dibuka di github : https://github.com/hernansartorio/jquery-nice-select
Sample dari om labalaba dengan kombinasi sari nice select
sama aja trick nya, combo select yg asli disembunyikan,
librari nya sendiri bikin "combo select palsu" pake div / li.
nih ... yg gw bold ... ... 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.
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.
jquery.nice-select.js gw cuma ubah yg gw bold ... ndak banyak.
... dan itu pun masih ada yg salah ...biarpunbisa 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
niatnya buat apa ?
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" ?
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 : ada tambahan ini juga :
saya tambahin script setelah comment // Close second combo when fist combo or otherwise
jadikan satu aja di file yg ada combo nya, bukan di core nice-select nya ...
digabung dgn : jadi :
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 : ... dan ini ...
Makasi om udah bantuin panjang lebar..
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.
jadi nice-select nya masih bisa dipakai ulang utk koding lain
biarpun id nya berbeda
tinggal didefinisikan sesuai kebutuhan