vanillaSelectBox
1.0.0
NPM I VanillaselectBox
Jika Anda memilih semua elemen ketika daftar disaring oleh kotak teks, itu akan menempatkan nilai semua ke placeholder bahkan ketika tidak memiliki semua nilai yang dipilih, jika Anda menutup dan membuka lagi pilihan Anda akan melihat bahwa tidak semua nilai diperiksa dan placeholder mengatakan semua
Idenya adalah menggunakan elemen terpilih duniawi, menyembunyikannya dan memberikan drop-down yang bagus sebagai gantinya. Tetapi data berasal dari elemen asli dan yang ini diperbarui dengan pilihan yang dibuat dan masih menerima acara perubahan. Pengecualian adalah init jarak jauh () dan fungsi pencarian jarak jauh () (opsional) ditambahkan dengan V 0,75 tetapi mereka membutuhkan setidaknya elemen pilih kosong dan hasilnya masih disediakan dalam elemen asli. Jangan ragu untuk menanyakan lebih banyak penjelasan di tab Diskusi. Sampai berjumpa lagi
Demo Classic: https://philippemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
Demo Remote: https://philippemarmeyer.github.io/vanillaselectbox/ajaxdemo.html?v=1.05
let selectBox = new vanillaSelectBox("#brands",{"maxHeight":200,search:true});
<select id="brands" multiple size="3">
selectBox = new vanillaSelectBox("#brandsOne", { "maxHeight": 200, "search": true, "placeHolder": "Choose a brand..." });
selectBox.disableItems(['Lamborghini','Land Rover']);
V1.05: Koreksi bug setValue () pada mode tunggal. Anda tidak dapat mengatur nilainya
V1.04: Pilih semua masalah yang ditetapkan oleh https://github.com/arthur911016
v1.03: getResult () Sebuah fonction baru untuk mendapatkan nilai yang dipilih dalam array
v1.02: Menambahkan 2 opsi baru "itemsseparator" untuk mengubah default "," pemisah item yang ditampilkan di tombol dan terjemahan.
v1.01: Menghapus baris kode yang tidak berguna 550.551 Edisi 71 oleh chchch
v1.00: Karena permintaan: Menambahkan file package.json dan beralih ke 1.0.0 sebagai persiapan ke unggahan ke NPM
V0.78: Berhenti menggunakan gaya inline di tombol utama. Anda dapat mencuri penggunaan KeepInlinestyles: benar untuk menggunakan perilaku warisan
V0.77: Bekerja di tempat tempat dengan Bastoune Help => tampaknya masih kehilangan nilai placeholder pada beberapa chapsall dropdown dropdown
v0.76: Kemungkinan untuk mengubah pohon dropdown dan mengubah fungsi pencarian jarak jauh + mengoreksi fungsi kosong ()
v0.75: Pencarian jarak jauh Siap + Modifikasi Pencarian Lokal: Ketika pemeriksaan pada optgroup memeriksa anak -anak hanya jika mereka tidak dikecualikan dari pencarian.
V0.72: Remote Search (WIP) Bugfix [x] Pilih semua Duplikasi
V0.71: Remote Search (WIP) Better code => Fungsi Disap Pengguna Pencarian Jarak Jauh Harus Mengembalikan Janji
V0.70: Pencarian jarak jauh (WIP) dapat diuji. hanya bekerja pada 1 menu level (bukan optgroup)
v0.65: Dua Tingkat: Perbaikan Bug: Grup diperiksa/tidak dicentang saat memeriksa semua/hapus centang semua diklik
V0.64: Dua Tingkat: Grup sekarang dapat diperiksa untuk memeriksa/menghapus centang pada opsi anak -anak
V0.63: Dua Tingkat: Satu Klik pada Grup Memilih / Membongkar Anak
V0.62: Opsi baru: MaxOptionWidth mengatur lebar maksimum untuk setiap opsi untuk menu sempit (Ellipsis Troncature)
v0.61: Opsi baru: MaxSelect, atur maksimum ke opsi yang dapat dipilih di menu pilihan ganda
V0.60: Dua Level: Optgroup sekarang digunakan untuk menunjukkan dua dropdown level
V0.59: Bug Fix: Kotak pencarian tumpang tindih item pertama dalam memilih tunggal
v0.58: perbaikan bug
v0.57: perbaikan bug (opsi minwidth tidak dihormati)
V0.56: Kotak centang multiselect sedikit lebih kecil, opsi maxwidth sekarang berfungsi + opsi Minwidth yang ditambahkan juga juga tombolnya memiliki atribut gaya untuk melindungi penampilannya
V0.55: Semua atribut dari opsi pilih asli disalin ke elemen selectbox. Terkecuali => "dipilih", "dinonaktifkan", "data-data", "nilai data", "gaya"
v0.54: Jika semua opsi dari Pilih dipilih oleh pengguna maka centang semua kotak dicentang.
V0.53: Jika semua opsi dari Select dipilih maka kotak centang semua dicentang => lihat demo "Pilih semua tes"
V0.52: Dukungan yang lebih baik dari SELECT ('all') => perintah konsisten dengan kotak centang dan memilih / membatalkan pilihan saat mencari pilih / hapus centang hanya item yang ditemukan
V0.51: Terjemahan untuk Pilih Semua/Bersihkan Semua + Koreksi CSS Kecil + Jangan Pilih Item Dinonaktifkan
V0.50: PR oleh https://github.com/jaguerra2017 Menambahkan tombol pilih semua/hapus semua + dukungan optgroup!
V 0.41: Bug dikoreksi, konten menu salah tempat jika transformasi CSS diterapkan pada induk
V 0.40: Klik pada One SelectBox Tutup yang lain yang dibuka Kotak
V 0,35: Anda dapat mengaktifkan dan menonaktifkan item. Opsi Disble Disble dari Select juga digunakan pada waktu init.
V 0.30: Menu berhenti bergerak di jendela ukuran dan gulir + z-index dalam urutan pembuatan untuk beberapa instance
V 0.26: Bug Terkoreksi dalam Mode Stayopen dengan Fungsi Disable ()
V 0,25: Stayopen opsi baru, dan dropbox bukan lagi dropbox tetapi multi-select yang bagus
V 0.22: Migrasi fungsi ke vanillaselectbox prototipe => Beberapa contoh vanillaselectbox () tetapi 1 set fungsi dalam memori
V 0,21: yaitu 11 kompatibilitas
V 0.20: Working SelectBox Baik pilihan tunggal dan berganda, dengan kotak pencarian!
V 0.10: Plugin Fungsional untuk Seleksi Single dan Multiple, tanpa Kotak Pencarian untuk saat ini
V 0.02: Acara Perubahan Pengiriman Menambahkan Untuk Memilih + Mark Cek yang Lebih Baik
V 0.01: First Commit => Dasar -Dasar untuk Kotak Pilih Tunggal + Dom Dibersihkan Jika Anda Mulai Dua kali
Menu pilih tunggal:
<select id="singleTest">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#singleTest",
{
"placeHolder":"Choose your car",
translations: { "all": "All", "items": "Cars" }
});
Multiple Select Menu: Catatan Atribut "Multiple" ke GE En Multiple Select Menu dan size = "2" untuk mengganti string yang dibatasi koma dari item yang dipilih dengan "3 item" di mana lebih dari item ukuran dipilih (di sini item diterjemahkan ke mobil)
<select id="multiTest" multiple size="2">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#multiTest",
{
"placeHolder":"Choose up to 3 cars",
"maxSelect":3,
"translations": { "all": "All", "items": "Cars" }
});
Dua level: Cukup gunakan tag optgroup untuk membuatnya dua level
<div>
<label for="dino-select">Choose dinosaurs :</label>
<select id="dino-select" multiple size="3" >
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
</div>
<script>
// How to get the result from the original select tag :
let chosenDinos = [];
function getValues(id) {
let result = [];
let collection = document.querySelectorAll("#" + id + " option");
collection.forEach(function (x) {
if (x.selected) {
result.push(x.value);
}
});
return result;
}
let selectDinos = new vanillaSelectBox("#dino-select",
{"maxHeight": 300,
"search": true,
translations: { "all": "All", "items": "Dinos" }
});
document.getElementById("dino-select").addEventListener("change", function (e) {
chosenDinos = getValues("dino-select");
console.log(chosenDinos);
});
</script>
Opsi MaxSelect: Batasi jumlah opsi yang dapat Anda pilih
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Opsi MaxOptionWidth: Batasi lebar opsi menu untuk membuat menu lebih sempit menggunakan ellipis
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Contoh pencarian jarak jauh:
<select id="demoM1" multiple="true" size="3">
</select>
let selectDemoM1 = new vanillaSelectBox("#demoM1",
{
"maxHeight": 300,
"search": true,
"placeHolder" : "search to load more data",
"translations": { "all": "everybody", "items": "people" },
"remote": {
"onSearch": doSearch, // used fro search and init
"onInitSize": 10, // if > 0 onSearch is used for init to populate le select element with the {onInitSize} first elements
}
}
);
function doSearch(what, datasize) {
let valueProperty = "id";
let textProperty = "name";
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET','./data.json', true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var data = JSON.parse(xhr.response);
if (what == "" && datasize != undefined && datasize > 0) { // for init to show some data
data = data.slice(0, datasize);
data = data.map(function (x) {
return {
value: x[valueProperty],
text: x[textProperty]
}
});
} else {
data = data.filter(function (x) {
let name = x[textProperty].toLowerCase();
if (name.indexOf(what.toLowerCase()) != -1)
return {
value: x[valueProperty],
text: x[textProperty]
}
});
}
resolve(data);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
