- Forms
- Select2
Basic
Code
<!-- basic -->
<select class="selectize">
<option selected value="orange">Orange</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
});
</script>
Nested
Code
<!-- nested -->
<select class="selectize">
<option disabled>Group 1</option>
<option selected value="orange">Orange</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
<option disabled>Group 2</option>
<option>Yellow</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option disabled>Group 3</option>
<option>Aqua</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
});
</script>
Disabling options
Code
<!-- disabling options -->
<select class="selectize">
<option selected value="orange">Orange</option>
<option disabled value="White">White</option>
<option value="Purple">Purple</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
});
</script>
Placeholder
Code
<!-- placeholder -->
<select class="selectize" placeholder="Choose...">
<option value="orange">Orange</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
});
</script>
Searchable
Code
<!-- searchable -->
<select id="seachable-select">
<option value="orange">Orange</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// seachable
var options = {
searchable: true
};
NiceSelect.bind(document.getElementById("seachable-select"), options);
});
</script>
Multiple select
Code
<!-- multiple -->
<select class="selectize" multiple='multiple'>
<option value="orange">Orange</option>
<option value="White">White</option>
</select>
<!-- script -->
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// default
var els = document.querySelectorAll(".selectize");
els.forEach(function(select) {
NiceSelect.bind(select);
});
});
</script>
© . Frestobile All rights reserved.