😇Nice Select A lightweight Vanilla JavaScript plugin (ok)
https://github.com/bluzky/nice-select2
PreviousCác tool phong thuỷ (ok)NextMerge objects with the same id but sum values of the objects (ok)
Last updated
https://github.com/bluzky/nice-select2
Last updated
C:\Users\Administrator\Downloads\nice-select2-master\docs\index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Vanilla Javascript Nice Select2</title>
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="dist/css/nice-select2.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40665301-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-40665301-3');
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1> Nice Select 2</h1>
<p>A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns.</p>
<a href="https://github.com/bluzky/nice-select2/releases" class="button">Download</a>
<a href="https://github.com/bluzky/nice-select2" class="button light">View on GitHub</a>
</div>
<h2>Usage</h2>
<p><strong>1.</strong> Include the library.</p>
<pre><code class="language-html"><script src="path/to/nice-select2.js"></script></code></pre>
<p><strong>2.</strong> Include the plugin styles, either the compiled CSS...</p>
<pre><code class="language-html"><link rel="stylesheet" href="path/to/nice-select2.css"></code></pre>
<p>...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.</p>
<pre><code class="language-scss">@import 'nice-select2'; // Or 'nice-select-prefixed'. See 'Notes' section.</code></pre>
<p><strong>3.</strong> Finally, initialize the plugin.</p>
<pre><code class="language-js">NiceSelect.bind(document.getElementById("#a-select"));</code></pre>
<p>All done. That will turn this:</p>
<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<p>...into this:</p>
<div class="box">
<select class="selectize" multiple='multiple'>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<p>There are no settings (a native select doesn't have settings), although there are a couple of special features, documented below.</p>
<h2>Display text</h2>
<p>You can specify an alternate text for each option, which will be displayed on the dropdown when that option is selected.</p>
<p>Add a <code class="language-html">data-display</code> attribute to the desired options. For example:</p>
<pre><code class="language-html"><select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select></code></pre>
<div class="box">
<select class="selectize">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Searchable options</h2>
<p>Updates the custom dropdown to reflect any changes made to the original select element.</p>
<pre><code class="language-js">var options = {searchable: true};
NiceSelect.bind(document.getElementById("seachable-select"), options);</code></pre>
<div class="box">
<select id="seachable-select">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Translations</h2>
<p>Translate the three different texts: 'Select an option', 'Search', 'selected'</p>
<pre><code class="language-js">var options = {searchable: true, placeholder: 'select', searchtext: 'zoek', selectedtext: 'geselecteerd'};
NiceSelect.bind(document.getElementById("seachable-select"), options);</code></pre>
<div class="box">
<select id="translated-select" multiple>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Custom classes</h2>
<p>Every class you assign to a select element will be copied to the generated dropdown. That way you can customize different versions of it to your needs just by adding new CSS.</p>
<p>These are some examples included in the plugin stylesheet:</p>
<div class="box">
<label>Wide</label>
<select class="wide selectize">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<div class="box">
<label class="right">Right</label>
<select class="right selectize">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<div class="box">
<label>Small</label>
<select class="small selectize">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option with long long text</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Methods</h2>
<h3>update</h3>
<p>Updates the custom dropdown to reflect any changes made to the original select element.</p>
<pre><code class="language-js">var instance = NiceSelect.bind(...);
instance.update();</code></pre>
<h3>destroy</h3>
<p>Removes the custom dropdown and unbinds all its events.</p>
<pre><code class="language-js">var instance = NiceSelect.bind(...);
instance.destroy();</code></pre>
<h2>Notes</h2>
<ul>
<li>
<p>Autoprefixer is used to add vendor prefixes to CSS rules for older browser support. A <i>nice-select-prefixed.scss</i> file is also generated if you wish to include the SASS file in your project and you're not using Autoprefixer.</p>
</li>
<li>
<p>In some cases there can be a brief flash in which the native selects are displayed—between the time the page is loaded and the scripts are run. This can be fixed by adding a CSS rule to hide them beforehand:</p>
<pre><code class="language-scss">select {
display: none;
}</code></pre>
<p>Note that the above rule will hide all native select elements. If you're only applying the plugin to some select elements you should adapt the rule accordingly.</p>
</li>
</ul>
<div class="footer">
<h2>Use responsibly</h2>
<p><a href="http://www.lukew.com/ff/entry.asp?1950">Dropdowns should be the UI of last resort.</a></p>
<a href="https://github.com/bluzky/nice-select2/releases" class="button">Download</a>
<a href="https://github.com/bluzky/nice-select2" class="button light">View on GitHub</a>
<div class="credit">
Javascript by <a href="http://bluzky.github.io">Dung Nguyen Tien</a>
Css by <a href="http://hernansartorio.com?r=ns">Hernán Sartorio</a>
</div>
</div>
</div>
<script src="dist/js/nice-select2.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
// seachable
var options = { searchable: true };
NiceSelect.bind(document.getElementById("seachable-select"), options);
//translated-select
var options = {
searchable: true,
placeholder: 'select',
searchtext: 'zoek',
selectedtext: 'geselecteerd'
};
document.getElementById("translated-select")._niceSelect = NiceSelect.bind(document.getElementById("translated-select"), options);
});
</script>
</body>
</html>C:\Users\Administrator\Downloads\nice-select2-master\docs\dist\css\style.css
code[class*=language-],pre[class*=language-]{border-radius:2px;color:#445870;hyphens:none;line-height:1.5;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal;direction:ltr;font-family:Inconsolata,monospace;font-size:13px;letter-spacing:0}pre[class*=language-]{padding:18px 24px;margin:0 0 24px;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f6f7f9}:not(pre)>code[class*=language-]{padding:0 2px 1px}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#90a1b5}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#ec4444}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#4abf60}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#55a1fb}.token.function{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#445870;font-family:"Work Sans",sans-serif;font-size:14px;font-weight:normal;letter-spacing:-0.25px;margin:0;padding:0 18px}p{line-height:1.6;margin:0 0 1.6em}h1{font-size:36px;font-weight:300;letter-spacing:-2px;margin:0 0 24px}h2{font-size:22px;font-weight:700;margin:0 0 12px;padding-top:48px}h3{font-size:18px;font-weight:400;margin:0 0 12px;padding-top:12px}ul{margin:0;padding-left:16px}a:not(.button){color:#55a1fb;outline:none;text-decoration:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-bottom:1px solid rgba(0,0,0,0)}a:not(.button):hover,a:not(.button):focus{border-bottom:1px solid #88bfff}::selection{background:#f3f4f7}.container{margin:96px auto 60px;max-width:40em}.box{background-color:#f6f7f9;border-radius:2px;margin-bottom:30px;padding:24px 30px}.box:before,.box:after{content:"";display:table}.box:after{clear:both}label{color:#90a1b5;font-size:11px;margin:0 2px 4px;text-transform:uppercase;float:left}label.right{float:right}.button{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#55a1fb;border-radius:5px;border:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-weight:600;height:38px;line-height:38px;outline:none;padding:0 24px;text-align:center;text-decoration:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;white-space:nowrap;width:auto}.button:hover,.button:focus{background-color:#4196fb}.button:active{background-color:#2d8bfa}.button.light{background-color:#fff;border:1px solid #e8e8e8;color:#55a1fb;line-height:36px;margin-left:24px}.button.light:hover{border-color:#dbdbdb}.button.light:active,.button.light:focus{border-color:#88bfff}@media screen and (max-width: 360px){.button{width:100%}.button.light{margin:18px 0 0}}.header{text-align:center;margin-bottom:60px}@media screen and (min-width: 600px){.header{padding:0 18px}}.header p{color:#90a1b5;font-size:18px;margin-bottom:36px}.footer{text-align:center}.footer p{margin-bottom:90px}.credit{color:#90a1b5;clear:both;font-size:12px;margin-top:90px}C:\Users\Administrator\Downloads\nice-select2-master\docs\dist\css\nice-select2.css
.nice-select{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fff;border-radius:5px;border:solid 1px #e8e8e8;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-family:inherit;font-size:14px;font-weight:normal;height:38px;line-height:36px;outline:none;padding-left:18px;padding-right:30px;position:relative;text-align:left !important;transition:all .2s ease-in-out;user-select:none;white-space:nowrap;width:auto}.nice-select:hover{border-color:#dbdbdb}.nice-select:active,.nice-select.open,.nice-select:focus{border-color:#999}.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:"";display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;transform-origin:66% 66%;transform:rotate(45deg);transition:all .15s ease-in-out;width:5px}.nice-select.open:after{transform:rotate(-135deg)}.nice-select.open .nice-select-dropdown{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none}.nice-select.disabled:after{border-color:#ccc}.nice-select.wide{width:100%}.nice-select.wide .nice-select-dropdown{left:0 !important;right:0 !important}.nice-select.right{float:right}.nice-select.right .nice-select-dropdown{left:auto;right:0}.nice-select.small{font-size:12px;height:36px;line-height:34px}.nice-select.small:after{height:4px;width:4px}.nice-select.small .option{line-height:34px;min-height:34px}.nice-select .nice-select-dropdown{margin-top:4px;background-color:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(68,68,68,.11);pointer-events:none;position:absolute;top:100%;left:0;transform-origin:50% 0;transform:scale(0.75) translateY(19px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:9;opacity:0}.nice-select .list{border-radius:5px;box-sizing:border-box;overflow:hidden;padding:0;max-height:210px;overflow-y:auto}.nice-select .list:hover .option:not(:hover){background-color:rgba(0,0,0,0) !important}.nice-select .option{cursor:pointer;font-weight:400;line-height:40px;list-style:none;outline:none;padding-left:18px;padding-right:29px;text-align:left;transition:all .2s}.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background-color:#f6f6f6}.nice-select .option.selected{font-weight:bold}.nice-select .option.disabled{background-color:rgba(0,0,0,0);color:#999;cursor:default}.nice-select .optgroup{font-weight:bold}.no-csspointerevents .nice-select .nice-select-dropdown{display:none}.no-csspointerevents .nice-select.open .nice-select-dropdown{display:block}.nice-select .list::-webkit-scrollbar{width:0}.nice-select .has-multiple{white-space:inherit;height:auto;padding:7px 12px;min-height:36px;line-height:22px}.nice-select .has-multiple span.current{border:1px solid #ccc;background:#eee;padding:0 10px;border-radius:3px;display:inline-block;line-height:24px;font-size:14px;margin-bottom:3px;margin-right:3px}.nice-select .has-multiple .multiple-options{display:block;line-height:24px;padding:0}.nice-select .nice-select-search-box{box-sizing:border-box;width:100%;padding:5px;pointer-events:none;border-radius:5px 5px 0 0}.nice-select .nice-select-search{box-sizing:border-box;background-color:#fff;border:1px solid #e8e8e8;border-radius:3px;color:#444;display:inline-block;vertical-align:middle;padding:7px 12px;margin:0 10px 0 0;width:100%;min-height:36px;line-height:22px;height:auto;outline:0 !important;font-size:14px}
C:\Users\Administrator\Downloads\nice-select2-master\docs\dist\js\nice-select2.js
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.NiceSelect=t():e.NiceSelect=t()}(self,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var s in i)e.o(i,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:i[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){var t=document.createEvent("MouseEvents");t.initEvent("click",!0,!1),e.dispatchEvent(t)}function s(e){var t=document.createEvent("HTMLEvents");t.initEvent("change",!0,!1),e.dispatchEvent(t)}function o(e){var t=document.createEvent("FocusEvent");t.initEvent("focusin",!0,!1),e.dispatchEvent(t)}function n(e){var t=document.createEvent("FocusEvent");t.initEvent("focusout",!0,!1),e.dispatchEvent(t)}function d(e){var t=document.createEvent("UIEvent");t.initEvent("modalclose",!0,!1),e.dispatchEvent(t)}function l(e,t){"invalid"==t?(c(this.dropdown,"invalid"),h(this.dropdown,"valid")):(c(this.dropdown,"valid"),h(this.dropdown,"invalid"))}function r(e,t){return null!=e[t]?e[t]:e.getAttribute(t)}function a(e,t){return!!e&&e.classList.contains(t)}function c(e,t){if(e)return e.classList.add(t)}function h(e,t){if(e)return e.classList.remove(t)}e.r(t),e.d(t,{bind:()=>f,default:()=>u});var p={data:null,searchable:!1,showSelectedItems:!1};function u(e,t){this.el=e,this.config=Object.assign({},p,t||{}),this.data=this.config.data,this.selectedOptions=[],this.placeholder=r(this.el,"placeholder")||this.config.placeholder||"Select an option",this.searchtext=r(this.el,"searchtext")||this.config.searchtext||"Search",this.selectedtext=r(this.el,"selectedtext")||this.config.selectedtext||"selected",this.dropdown=null,this.multiple=r(this.el,"multiple"),this.disabled=r(this.el,"disabled"),this.create()}function f(e,t){return new u(e,t)}return u.prototype.create=function(){this.el.style.opacity="0",this.el.style.width="0",this.el.style.padding="0",this.el.style.height="0",this.data?this.processData(this.data):this.extractData(),this.renderDropdown(),this.bindEvent()},u.prototype.processData=function(e){var t=[];e.forEach((e=>{t.push({data:e,attributes:{selected:!!e.selected,disabled:!!e.disabled,optgroup:"optgroup"==e.value}})})),this.options=t},u.prototype.extractData=function(){var e=this.el.querySelectorAll("option,optgroup"),t=[],i=[],s=[];e.forEach((e=>{if("OPTGROUP"==e.tagName)var s={text:e.label,value:"optgroup"};else s={text:e.innerText,value:e.value,selected:null!=e.getAttribute("selected"),disabled:null!=e.getAttribute("disabled")};var o={selected:e.getAttribute("selected"),disabled:e.disabled,optgroup:"OPTGROUP"==e.tagName};t.push(s),i.push({data:s,attributes:o})})),this.data=t,this.options=i,this.options.forEach((e=>{e.attributes.selected&&s.push(e)})),this.selectedOptions=s},u.prototype.renderDropdown=function(){var e=["nice-select",r(this.el,"class")||"",this.disabled?"disabled":"",this.multiple?"has-multiple":""];let t='<div class="nice-select-search-box">';t+=`<input type="text" class="nice-select-search" placeholder="${this.searchtext}..." title="search"/>`,t+="</div>";var i=`<div class="${e.join(" ")}" tabindex="${this.disabled?null:0}">`;i+=`<span class="${this.multiple?"multiple-options":"current"}"></span>`,i+='<div class="nice-select-dropdown">',i+=`${this.config.searchable?t:""}`,i+='<ul class="list"></ul>',i+="</div>",i+="</div>",this.el.insertAdjacentHTML("afterend",i),this.dropdown=this.el.nextElementSibling,this._renderSelectedItems(),this._renderItems()},u.prototype._renderSelectedItems=function(){if(this.multiple){var e="";this.config.showSelectedItems||this.config.showSelectedItems||"auto"==window.getComputedStyle(this.dropdown).width||this.selectedOptions.length<2?(this.selectedOptions.forEach((function(t){e+=`<span class="current">${t.data.text}</span>`})),e=""==e?this.placeholder:e):e=this.selectedOptions.length+" "+this.selectedtext,this.dropdown.querySelector(".multiple-options").innerHTML=e}else{var t=this.selectedOptions.length>0?this.selectedOptions[0].data.text:this.placeholder;this.dropdown.querySelector(".current").innerHTML=t}},u.prototype._renderItems=function(){var e=this.dropdown.querySelector("ul");this.options.forEach((t=>{e.appendChild(this._renderItem(t))}))},u.prototype._renderItem=function(e){var t=document.createElement("li");if(t.innerHTML=e.data.text,e.attributes.optgroup)c(t,"optgroup");else{t.setAttribute("data-value",e.data.value);var i=["option",e.attributes.selected?"selected":null,e.attributes.disabled?"disabled":null];t.addEventListener("click",this._onItemClicked.bind(this,e)),t.classList.add(...i)}return e.element=t,t},u.prototype.update=function(){if(this.extractData(),this.dropdown){var e=a(this.dropdown,"open");this.dropdown.parentNode.removeChild(this.dropdown),this.create(),e&&i(this.dropdown)}r(this.el,"disabled")?this.disable():this.enable()},u.prototype.disable=function(){this.disabled||(this.disabled=!0,c(this.dropdown,"disabled"))},u.prototype.enable=function(){this.disabled&&(this.disabled=!1,h(this.dropdown,"disabled"))},u.prototype.clear=function(){this.resetSelectValue(),this.selectedOptions=[],this._renderSelectedItems(),this.update(),s(this.el)},u.prototype.destroy=function(){this.dropdown&&(this.dropdown.parentNode.removeChild(this.dropdown),this.el.style.display="")},u.prototype.bindEvent=function(){this.dropdown.addEventListener("click",this._onClicked.bind(this)),this.dropdown.addEventListener("keydown",this._onKeyPressed.bind(this)),this.dropdown.addEventListener("focusin",o.bind(this,this.el)),this.dropdown.addEventListener("focusout",n.bind(this,this.el)),this.el.addEventListener("invalid",l.bind(this,this.el,"invalid")),window.addEventListener("click",this._onClickedOutside.bind(this)),this.config.searchable&&this._bindSearchEvent()},u.prototype._bindSearchEvent=function(){var e=this.dropdown.querySelector(".nice-select-search");e&&e.addEventListener("click",(function(e){return e.stopPropagation(),!1})),e.addEventListener("input",this._onSearchChanged.bind(this))},u.prototype._onClicked=function(e){var t,i;if(e.preventDefault(),a(this.dropdown,"open")?this.multiple||(h(this.dropdown,"open"),d(this.el)):(c(this.dropdown,"open"),t=this.el,(i=document.createEvent("UIEvent")).initEvent("modalopen",!0,!1),t.dispatchEvent(i)),a(this.dropdown,"open")){var s=this.dropdown.querySelector(".nice-select-search");s&&(s.value="",s.focus());var o=this.dropdown.querySelector(".focus");h(o,"focus"),c(o=this.dropdown.querySelector(".selected"),"focus"),this.dropdown.querySelectorAll("ul li").forEach((function(e){e.style.display=""}))}else this.dropdown.focus()},u.prototype._onItemClicked=function(e,t){var i=t.target;a(i,"disabled")||(this.multiple?a(i,"selected")?(h(i,"selected"),this.selectedOptions.splice(this.selectedOptions.indexOf(e),1),this.el.querySelector(`option[value="${i.dataset.value}"]`).removeAttribute("selected")):(c(i,"selected"),this.selectedOptions.push(e)):(this.selectedOptions.forEach((function(e){h(e.element,"selected")})),c(i,"selected"),this.selectedOptions=[e]),this._renderSelectedItems(),this.updateSelectValue())},u.prototype.updateSelectValue=function(){if(this.multiple){var e=this.el;this.selectedOptions.forEach((function(t){var i=e.querySelector(`option[value="${t.data.value}"]`);i&&i.setAttribute("selected",!0)}))}else this.selectedOptions.length>0&&(this.el.value=this.selectedOptions[0].data.value);s(this.el)},u.prototype.resetSelectValue=function(){if(this.multiple){var e=this.el;this.selectedOptions.forEach((function(t){var i=e.querySelector(`option[value="${t.data.value}"]`);i&&i.removeAttribute("selected")}))}else this.selectedOptions.length>0&&(this.el.selectedIndex=-1);s(this.el)},u.prototype._onClickedOutside=function(e){this.dropdown.contains(e.target)||(h(this.dropdown,"open"),d(this.el))},u.prototype._onKeyPressed=function(e){var t=this.dropdown.querySelector(".focus"),s=a(this.dropdown,"open");if(13==e.keyCode)i(s?t:this.dropdown);else if(40==e.keyCode){if(s){var o=this._findNext(t);o&&(h(this.dropdown.querySelector(".focus"),"focus"),c(o,"focus"))}else i(this.dropdown);e.preventDefault()}else if(38==e.keyCode){if(s){var n=this._findPrev(t);n&&(h(this.dropdown.querySelector(".focus"),"focus"),c(n,"focus"))}else i(this.dropdown);e.preventDefault()}else if(27==e.keyCode&&s)i(this.dropdown);else if(32===e.keyCode&&s)return!1;return!1},u.prototype._findNext=function(e){for(e=e?e.nextElementSibling:this.dropdown.querySelector(".list .option");e;){if(!a(e,"disabled")&&"none"!=e.style.display)return e;e=e.nextElementSibling}return null},u.prototype._findPrev=function(e){for(e=e?e.previousElementSibling:this.dropdown.querySelector(".list .option:last-child");e;){if(!a(e,"disabled")&&"none"!=e.style.display)return e;e=e.previousElementSibling}return null},u.prototype._onSearchChanged=function(e){var t=a(this.dropdown,"open"),i=e.target.value;if(""==(i=i.toLowerCase()))this.options.forEach((function(e){e.element.style.display=""}));else if(t){var s=new RegExp(i);this.options.forEach((function(e){var t=e.data.text.toLowerCase(),i=s.test(t);e.element.style.display=i?"":"none"}))}this.dropdown.querySelectorAll(".focus").forEach((function(e){h(e,"focus")})),c(this._findNext(null),"focus")},t})()));Vanilla Javascript Nice Select2window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-40665301-3');
A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns.
1. Include the library.
<script src="path/to/nice-select2.js"></script>2. Include the plugin styles, either the compiled CSS...
<link rel="stylesheet" href="path/to/nice-select2.css">...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.
@import 'nice-select2'; // Or 'nice-select-prefixed'. See 'Notes' section.3. Finally, initialize the plugin.
NiceSelect.bind(document.getElementById("#a-select"));All done. That will turn this:
Some optionAnother optionA disabled optionPotato
...into this:
Some optionAnother optionA disabled optionPotatoSome optionAnother optionA disabled optionPotatoSome optionAnother optionA disabled optionPotato
There are no settings (a native select doesn't have settings), although there are a couple of special features, documented below.
You can specify an alternate text for each option, which will be displayed on the dropdown when that option is selected.
Add a data-display attribute to the desired options. For example:
<select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>NothingSome optionAnother optionA disabled optionPotato
Updates the custom dropdown to reflect any changes made to the original select element.
var options = {searchable: true};
NiceSelect.bind(document.getElementById("seachable-select"), options);NothingSome optionAnother optionA disabled optionPotato
Translate the three different texts: 'Select an option', 'Search', 'selected'
var options = {searchable: true, placeholder: 'select', searchtext: 'zoek', selectedtext: 'geselecteerd'};
NiceSelect.bind(document.getElementById("seachable-select"), options);Some optionAnother optionA disabled optionPotato
Every class you assign to a select element will be copied to the generated dropdown. That way you can customize different versions of it to your needs just by adding new CSS.
These are some examples included in the plugin stylesheet:
Wide NothingSome optionAnother optionA disabled optionPotatoRight NothingSome optionAnother optionA disabled optionPotatoSmall NothingSome optionAnother option with long long textA disabled optionPotato
Updates the custom dropdown to reflect any changes made to the original select element.
var instance = NiceSelect.bind(...);
instance.update();Removes the custom dropdown and unbinds all its events.
var instance = NiceSelect.bind(...);
instance.destroy();Autoprefixer is used to add vendor prefixes to CSS rules for older browser support. A nice-select-prefixed.scss file is also generated if you wish to include the SASS file in your project and you're not using Autoprefixer.
In some cases there can be a brief flash in which the native selects are displayed—between the time the page is loaded and the scripts are run. This can be fixed by adding a CSS rule to hide them beforehand:
select {
display: none;
}Note that the above rule will hide all native select elements. If you're only applying the plugin to some select elements you should adapt the rule accordingly.
Dropdowns should be the UI of last resort.
Download View on GitHubJavascript by Dung Nguyen Tien Css by Hernán Sartoriodocument.addEventListener("DOMContentLoaded", function(e) { // default var els = document.querySelectorAll(".selectize"); els.forEach(function(select) { NiceSelect.bind(select); }); // seachable var options = { searchable: true }; NiceSelect.bind(document.getElementById("seachable-select"), options); //translated-select var options = { searchable: true, placeholder: 'select', searchtext: 'zoek', selectedtext: 'geselecteerd' }; document.getElementById("translated-select")._niceSelect = NiceSelect.bind(document.getElementById("translated-select"), options); });
