vanillaSelectBox
1.0.0
npm i vanillaselectbox
リストがテキストボックスによってフィルタリングされたときにすべての要素を選択すると、すべての値が選択されていない場合でも、すべての値をプレースホルダーに配置します。
アイデアは、平凡な選択要素を使用し、それを非表示にして、代わりに素敵なドロップダウンを提供することです。しかし、データは元の要素からのものであり、この要素は選択された選択で更新され、変更イベントがまだ受信されます。例外は、v 0.75で追加されたリモートinit（）とリモート検索（）関数（オプション）ですが、少なくとも空の選択要素が必要であり、結果は元の要素でまだ提供されています。 [ディスカッション]タブで詳細をお気軽にお問い合わせください。また近いうちにお会いしましょう
デモクラシック：https：//philippemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
デモリモート：https：//philippemarcmeyer.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：SetValue（）シングルモードでのバグ修正。値を設定できませんでした
v1.04：https://github.com/arthur911016で修正されたすべての問題を選択します
v1.03：getResult（）アレイで選択した値を取得する新しい機能
v1.02：デフォルトを変更するための2つの新しいオプション「itemsseparator」、「アイテムセパレーターはボタンと翻訳に表示されます。
V1.01：Chchchによる役に立たないコードライン550,551 Issue 71の削除
v1.00：需要のため：package.jsonファイルを追加し、npmにアップロードするために1.0.0に切り替えました
V0.78：メインボタンでインラインスタイルの使用を停止します。使用可能な使用が可能ですkeepinlinestyles：純粋なレガシー行動を使用する
V0.77：Bastoune Help =>を使用してPlace Holderの作業
V0.76：ドロップダウンツリーを変更してリモート検索機能を変更する可能性 + empty（）関数の修正
v0.75：リモート検索対応 +ローカル検索の変更：OptGroupのチェックが検索から除外されていない場合にのみ子供をチェックする場合。
V0.72：リモート検索（WIP）bugfix [x]すべての複製を選択します
V0.71：リモート検索（WIP）より良いコード=>リモート検索ユーザーの削除関数は約束を返す必要があります
V0.70：リモート検索（WIP）をテストできます。 1レベルのメニューでのみ動作します（オプトグループではありません）
v0.65：2つのレベル：バグ修正：グループがチェック/チェックされていないすべてのチェック/チェックすべてがクリックされます
v0.64：2つのレベル：グループがチェック可能であることが子供のオプションをチェック/チェックします
V0.63：2つのレベル：グループをワンクリックする
v0.62：新しいオプション：maxoptionwidth狭いメニューの各オプションの最大幅を設定します（ellipsis troncature）
v0.61：新しいオプション：maxselect、複数選択メニューの選択可能なオプションに最大値を設定します
V0.60：2つのレベル：オプトグループが2つのレベルのドロップダウンを表示するために使用されます
V0.59：バグ修正：検索ボックスがシングル選択で最初のアイテムが重複していました
V0.58：バグ修正
V0.57：バグ修正（ミニ幅オプションが尊重されない）
V0.56：マルチセレクトチェックボックスは少し小さく、最大幅オプションが機能している +追加のミニ幅オプションになりました。
V0.55：元のSelectオプションからのすべての属性がSelectbox要素にコピーされます。 exced => "selected"、 "disabled"、 "data-text"、 "data-value"、 "style"
V0.54：選択のすべてのオプションがユーザーによって選択されている場合、すべてのチェックチェックボックスがチェックされます。
V0.53：選択のすべてのオプションが選択されている場合、すべてのチェックチェックボックスがチェックされます=>デモ「すべてのテストを選択」を参照
v0.52：select（ 'all'）=>コマンドのより良いサポートは、チェックボックスと選択 /解除の選択 /選択の選択 /解除の選択 /解除のみを検索します。
V0.51：すべての選択の翻訳/クリアオール +マイナーCSS補正 +無効なアイテムを選択しないでください
v0.50：https：//github.com/jaguerra2017 by https：//github.com/jaguerra2017すべての選択/クリアオールチェックボタン +オプトグループサポート！
v 0.41：バグ修正、親にCSS変換が適用された場合、メニューコンテンツは置き忘れられました
v 0.40：1つのselectboxをクリックすると、他の開くボックスを閉じます
V 0.35：アイテムを有効にして無効にすることができます。 Selectの既にディスブルオプションは、init時点でも使用されます。
v 0.30：メニューは、複数のインスタンスの作成の順に、ウィンドウのサイズを変更し、スクロール + z-indexをスクロールするのを停止します
V 0.26：disable（）関数を使用したStayOpenモードでの修正バグ
V 0.25：新しいオプションが滞在し、ドロップボックスはもはやドロップボックスではなく、マルチセレクトです
v 0.22：機能をVanillaselectboxプロトタイプに移行します=> vanillaselectbox（）のいくつかのインスタンスですが、メモリ内の1セットの関数セット
v 0.21：すなわち11互換性
v 0.20：Select-Boxを使用して、SelectBoxの両方の選択ボックスを使用して動作します。
V 0.10：シングル選択と複数の選択の両方の機能プラグイン、今のところ検索ボックスなし
v 0.02：ディスパッチ変更イベントを追加して選択してチェックマークを選択します
v 0.01：最初のcommit =>単一の選択ボックスの基本 + 2回開始するとdomがクリーニングされます
シングル選択メニュー：
<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" }
});
複数の選択メニュー：ge en ge en selectメニューへの「複数の」属性とsize = "2"に注意して、選択したアイテムのコンマ区切り文字列を「3項目」に置き換えます。
<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" }
});
2つのレベル：オプトグループタグを使用して2つのレベルにするだけです
<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>
maxSelectオプション：選択できるオプションの数を制限します
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
maxoptionWidthオプション：メニューオプションの幅を制限して、エリピスを使用してメニューをより狭くする
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
リモート検索の例：
<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();
});
}
