Note: Open inspector console to see events logs.
Note: Option 3 select/unselect will never be confirmed by receiveStateSelected.
<div class="row">
<p>
<strong>Note:</strong> Open inspector console to see events logs.
</p>
</div>
<div class="row">
<ch5-select id="volume1"
size="4" indexId="Idx"
sendEventOnChange="volume_select"
receiveStateValue="volume_selected"
noneSelectedPrompt="Select"
sendEventOnFocus="focus_signal">
<template>
<ch5-select-option>
<i class="fas fa-{{fa-icon}}"></i>
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<ch5-select id="multiselect_ex" size="4" indexId="Idx"
multiselect mode="panel" feedbackMode="submit" noneSelectedPrompt="Select">
<template>
<ch5-select-option receiveStateSelected="multi_select_opt_{{Idx}}_selected"
sendEventOnClick="multi_select_opt_{{Idx}}_on_click"
receiveStateLabel="label_signal_{{Idx}}">
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
<strong>Note:</strong> Option 3 select/unselect will never be confirmed by receiveStateSelected.
</p>
<p style="margin-top: 24px;">
<ch5-button id="submit-btn" label="Submit"></ch5-button>
<ch5-button id="reset-btn" label="Reset"></ch5-button>
</p>
</div>
(function($, CrComLib){
const select1 = $('#volume1')[0];
const ex1LogPrefix = '[Example ' + select1.id + '] ';
select1.addEventListener('change', (e) => {
console.log(ex1LogPrefix + 'change event received', e.detail);
});
select1.addEventListener('dirty', (e) => {
console.log(ex1LogPrefix + 'dirty event received');
});
select1.addEventListener('clean', (e) => {
console.log(ex1LogPrefix + 'clean event received');
});
select1.addEventListener('focus', (e) => {
console.log(ex1LogPrefix + 'focus event received');
});
select1.addEventListener('blur', (e) => {
console.log(ex1LogPrefix + 'blur event received');
});
const select2 = $('#multiselect_ex')[0];
const ex2LogPrefix = '[Example ' + select2.id + '] ';
select2.addEventListener('dirty', (e) => {
console.log(ex2LogPrefix + 'dirty event received');
});
select2.addEventListener('clean', (e) => {
console.log(ex2LogPrefix + 'clean event received');
});
select2.addEventListener('focus', (e) => {
console.log(ex2LogPrefix + 'focus event received');
});
select2.addEventListener('blur', (e) => {
console.log(ex2LogPrefix + 'blur event received');
});
let submitBtn = $('#submit-btn')[0];
submitBtn.addEventListener('click', (e) => {
select2.submit();
});
let resetBtn = $('#reset-btn')[0];
resetBtn.addEventListener('click', (e) => {
select2.reset();
});
})(jQuery,CrComLib);
.row {
padding: 24px 0;
display: inline-block;
width: 100%;
}
.ch5-select__panel__item:not(.ch5-select__panel__item--selected) {
border: 1px solid #f8f9fa;
}
.ch5-select__panel__item > * {
margin: 16px;
}