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();
});
}
