- فرم ها
- لیست کشویی (select2)
ساده
نمونه کد
<!-- 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 -->
<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 -->
<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 -->
<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 -->
<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 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>
© روشاک