vanillaSelectBox
1.0.0
NPM I Vanillaselectbox
如果在列表被文本框過濾時選擇所有元素，即使沒有選擇的所有值，它也會將所有值全部放在佔位符中，如果您再次關閉並打開了選擇，則會注意到並不是所有的值都被檢查了，並且佔位符表示所有值
這個想法是使用平凡的選擇元素，將其隱藏並提供一個不錯的下拉菜單。但是數據來自原始元素，該元素已通過做出的選擇進行更新，但仍會收到更改事件。遠程init（）和遠程搜索（）函數（可選）添加了v 0.75，但它們至少需要一個空的選擇元素，並且結果仍在原始元素中提供。請隨時在“討論”選項卡中詢問更多解釋。再見
演示經典：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（）一種新的fontuct，以在數組中獲取所選值
v1.02：添加2個新選項“項目分隔符”以更改默認值“”，“在按鈕和translations中顯示的項目分隔符。如果只有一個，則在單數中顯示該項目。
V1.01：CHCHCH刪除無用的代碼線550,551第71條
v1.00：由於需求：添加了一個包裝。
V0.78：停止在主按鈕中使用內聯樣式。您可以竊取使用keepinlinesty：TRUE使用遺產行為
V0.77：使用Bastoune幫助=>在位置支架上工作=>似乎仍然失去佔位符的價值
V0.76：更改下拉樹並更改遠程搜索功能 + CORICTER（）函數的可能性
V0.75：遠程搜索就緒 +本地搜索修改：僅在optgroup上檢查兒童時，當他們沒有被排除在搜索之外時。
V0.72：遠程搜索（WIP）BugFix [X]選擇所有重複的
V0.71：遠程搜索（WIP）更好的代碼=>遠程搜索用戶定義的功能必須返回承諾
V0.70：可以測試遠程搜索（WIP）。僅在1級菜單（不是OptGroup）上工作
V0.65：兩個級別：錯誤修復：檢查全部/取消選中時，檢查/未選中組
V0.64：兩個級別：現在可以檢查組以檢查/取消選中兒童選項
V0.63：兩個級別：一單擊“小組”選擇 /取消選擇孩子
V0.62：新選項：MaxOptionWidth為狹窄菜單的每個選項設置一個最大寬度（Ellipsis Troncature）
V0.61：新選項：MaxSelect，將最大值設置為多選擇菜單中的可選選項
V0.60：兩個級別：現在使用OptGroup顯示兩個級別下拉級
V0.59：錯誤修復：搜索框在單個選擇中重疊的第一個項目
V0.58：錯誤修復
V0.57：錯誤修復（最小選項未兌現）
V0.56：多選擇複選框有點較小，最大寬度選項現在正常工作 +添加的MinWidth選項，以及該按鈕具有保護其外觀的樣式屬性
V0.55：原始選擇選項中的所有屬性均複製到SelectBox元素。異常=>“選擇”，“禁用”，“ data-text”，“ data-value”，“樣式”
v0.54：如果選擇的所有選項是用戶選擇的，則檢查所有復選框。
v0.53：如果選擇了選項的所有選項，則選中所有復選框=>請參閱演示“選擇所有測試”
V0.52：更好地支持SELECT（'all'）=>命令與復選框一致，並且在搜索select / nockeck時僅選擇 /取消選中僅找到 /取消選中
V0.51：選擇全部/清除ALL + BINLIC CSS更正 +不選擇禁用項目的翻譯
V0.50：https：//github.com/jaguerra2017添加一個選擇全部/清除所有檢查按鈕 + OptGroup支持！
v 0.41：糾正錯誤，如果將CSS轉換應用於父母，則放錯了位置
v 0.40：單擊一個selectbox關閉另一個打開的框
v 0.35：您可以啟用和禁用物品。選擇的已經截止的選項也是在開始時使用的。
v 0.30：菜單停止在窗口上移動大小和滾動 + z索引，以創建多個實例
v 0.26：使用Disable（）函數在Stayopen模式下更正錯誤
v 0.25：新的選項Stayopen，Dropbox不再是Dropbox，而是一個不錯的多選項
v 0.22：將函數遷移到vanillaselectbox原型=> vanillaselectbox（）的幾個實例，但內存中的1組函數
v 0.21：I 11兼容性
v 0.20：使用搜索框的單個和多個選擇工作框！
v 0.10：單個和多個選擇的功能插件，目前無搜索框
v 0.02：添加的調度更改事件以選擇 +更好的複選標記
v 0.01：第一個commit =>單個選擇框的基礎知識 +如果您啟動兩次
單個選擇菜單：
<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多菜單的“多個”屬性和size =“ 2”，以替換選定項目的逗號劃界字符串，其中選擇了大尺寸的項目（此處將項目轉換為汽車）
<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" }
});
兩個級別：只需使用OptGroup標籤即可使其兩個級別
<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選項：限制菜單選項的寬度，以使菜單使用Ellipis更狹窄
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();
});
}
