Adding the functionality to multiple fancy drop down box
List header page contain two select box, using the script function adding two fancy drop down box with functionality
{{#if showHeader}}
<div class="list-header-view" data-type="accordion">
<div class="list-header-view-accordion" data-action="accordion-header">
<div class="list-header-view-accordion-link">{{headerMarkup}}</div>
{{#if showHeaderExpandable}}
<div class="list-header-view-accordion-header">
<button class="list-header-view-filter-button" data-action="toggle-filters">
{{translate 'Filter'}} <i class="list-header-view-filter-button-icon"></i>
</button>
</div>
<div class="list-header-view-accordion-body {{initiallyCollapsed}}" data-type="accordion-body"
{{{accordionStyle}}}>
<div class="list-header-view-accordion-body-header {{classes}}">
{{#if rangeFilter}}
<div class="list-header-view-datepicker-from">
<label class="list-header-view-from" for="from">{{rangeFilterLabel}}</label>
<div class="list-header-view-datepicker-container-input">
<input class="list-header-view-accordion-body-input" id="from" name="from" type="date"
autocomplete="off" data-format="yyyy-mm-dd" data-start-date="{{rangeFilterFromMin}}"
data-end-date="{{rangeFilterFromMax}}" value="{{selectedRangeFrom}}"
data-action="range-filter" data-todayhighlight="true" />
<i class="list-header-view-accordion-body-calendar-icon"></i>
<a class="list-header-view-accordion-body-clear" data-action="clear-value">
<i class="list-header-view-accordion-body-clear-icon"></i>
</a>
</div>
</div>
<div class="list-header-view-datepicker-to">
<label class="list-header-view-to" for="to">{{translate 'to'}}</label>
<div class="list-header-view-datepicker-container-input">
<input class="list-header-view-accordion-body-input" id="to" name="to" type="date"
autocomplete="off" data-format="yyyy-mm-dd" data-start-date="{{rangeFilterToMin}}"
data-end-date="{{rangeFilterToMax}}" value="{{selectedRangeTo}}" data-action="range-filter"
data-todayhighlight="true" />
<i class="list-header-view-accordion-body-calendar-icon"></i>
<a class="list-header-view-accordion-body-clear" data-action="clear-value">
<i class="list-header-view-accordion-body-clear-icon"></i>
</a>
</div>
</div>
{{/if}}
{{#if sorts}}
<button class="list-header-view-accordion-body-button-sort" data-action="toggle-sort">
<!-- Filters
<i class="list-header-view-accordion-body-button-sort-up {{sortIconleft}}"></i>
<i class="list-header-view-accordion-body-button-sort-down {{sortIconDown}}"></i> -->
</button>
<span class="list-header-view-sorts">
<!-- <span class="list-header-view-filters"> -->
<!-- <div class="login-register-register-form-controls-group"> -->
<div class="login-register-register-form-controls selectField">
<select id="sel1" name="sort" class="list-header-view-accordion-body-select" data-action="sort">
<option value="Sorting" disabled selected style="display:none">Sorting</option>
{{#each sorts}}
<option value="{{value}}" data-permissions="{{permission}}" {{#if selected}} selected
{{/if}}>
{{name}}</option>
{{/each}}
</select>
<!-- </div> -->
</div>
</span>
{{/if}}
{{#if filters}}
<!-- <div class="list-header-view-filters"> -->
<div class="login-register-register-form-controls selectField">
<select id="sel2" name="filter" class="list-header-view-accordion-body-select" data-action="filter">
<option value="Sorting" disabled selected style="display:none">Sorting</option>
{{#each filters}}
<option value="{{itemValue}}" class="{{cssClassName}}" data-permissions="{{permission}}" {{#if
selected}} selected {{/if}}>{{name}}</option>
{{/each}}
</select>
</div>
<!-- </div> -->
{{/if}}
{{#if sorts}}
<span class="list-header-view-sorts">
<!-- <span class="list-header-view-filters"> -->
<!-- <div class="login-register-register-form-controls-group"> -->
<button class="list-header-view-accordion-body-button-sort" data-action="toggle-sort">
Filters
<i class="list-header-view-accordion-body-button-sort-up {{sortIconleft}}"></i>
<i class="list-header-view-accordion-body-button-sort-down {{sortIconDown}}"></i>
</button>
</span>
{{/if}}
</div>
</div>
{{/if}}
</div>
</div>
{{/if}}
{{#if showSelectAll}}
<div class="list-header-view-select-all">
<label class="list-header-view-select-all-label" for="select-all">
{{#if unselectedLength}}
<input type="checkbox" name="select-all" id="select-all" data-action="select-all">{{translate 'Select All
($(0))' collectionLength}}
{{else}}
<input type="checkbox" name="select-all" id="select-all" data-action="unselect-all" checked>{{translate
'Unselect All ($(0))' collectionLength}}
{{/if}}
</label>
</div>
{{/if}}
{{#if showPagination}}
<div class="list-header-view-paginator">
<div data-view="GlobalViews.Pagination"></div>
{{#if showCurrentPage}}
<div data-view="GlobalViews.ShowCurrentPage"></div>
{{/if}}
</div>
{{/if}}
<script>
$(document).ready(function () { // use jQuery lib
jQuery('#register-firstname').on('click', function () { jQuery('#isdentist').val('true') });
var $select = $("select"),
$speed = "fast";
// var $selectname = $select[0].name;
//console.log("emfd", $select);
$select.each(function () {
// Allow default browser styling
// if ($(this).hasClass("default")) {
// return;
// }
$(this).css("display", "none");
// Generate fancy select box
$(this).after('<ul class="fancy-select" style="display: none;"></ul>');
var $current = $(this),
$fancy = $current.next(".fancy-select");
// Get options
var $options = $(this).find("option");
// $options = $options.splice(1);
$options.each(function (index) {
var $val = $(this).val(),
$text = $(this).text(),
$disabled = "";
// Add class for disabled options
if ($(this).attr("disabled")) $disabled = " disabled";
if (index == 0) {
// Create clickable object from first option
$fancy.before('<span class="selected" data-val="' + $val + '">' + $text + "</span>");
}
// Load all options into fake dropdown
if (index != 0) {
console.log("xx,", $val);
$fancy.append('<li class="fancy-option' + $disabled + '" data-val="' + $val + '">' + $text + "</li>");
}
// Update fake select box if this option is selected
if ($(this).attr("selected")) {
$(this).parent("select").val($val);
$(this).parent("select").next(".selected").attr("data-val", $val).text($text);
}
});
});
// Show/hide options on click
$(".selected").click(function (target) {
$(this).addClass("active");
var $box = $(this).next(".fancy-select"),
$target = target,
$object = $(this);
// Prevent multiple open select boxes
if ($box.is(":visible")) {
$box.slideUp($speed);
return;
} else {
$(".fancy-select").slideUp();
$box.slideDown($speed);
}
// Click outside select box closes it
$target.stopPropagation();
if ($box.css("display") !== "none") {
$(document).click(function () {
$('.selectField .selected').removeClass("active");
$box.slideUp($speed);
});
}
});
// Make selection
$(".fancy-option").click(function () {
$(this).removeClass("active");
var $val = $(this).attr("data-val"),
$text = $(this).text(),
$box = $(this).parent(".fancy-select"),
$selected = $box.prev(".selected"),
$disabled = $(this).hasClass("disabled");
// Basic disabled option functionality
if ($disabled) {
return;
}
$box.slideUp($speed);
// Update select object's value
// and the fake box's "value"
$selected.prev("select").val($val);
$selected.attr("data-val", $val).text($text);
var em = $val;
var selectname = $box[0].previousSibling.previousElementSibling;
if (selectname.id == "sel1") {
$("#sel1").val(em).change();
} else {
$("#sel2").val(em).change();
}
// Get Output
var $what = $("#what").val(),
$when = $("#when").val();
console.log($what);
});
});
</script>
{{!----
Use the following context variables when customizing this template:
showHeader (Array)
classes (String)
showHeaderExpandable (Boolean)
rangeFilterLabel (String)
rangeFilterFromMin (String)
rangeFilterFromMax (String)
rangeFilterToMin (String)
rangeFilterToMax (String)
filters (Array)
sorts (Array)
sortIconUp (String)
sortIconDown (String)
showSelectAll (Boolean)
unselectedLength (Number)
collectionLength (Number)
showPagination (Boolean)
showCurrentPage (Boolean)
initiallyCollapsed (String)
headerMarkup (Object)
headerMarkup.string (String)
rangeFilter (String)
----}}