【JavaScript】「Choices.js」の is-highlighted クラスを選択中の要素へ付与する方法
GitHubで「selectbox」と検索すると、jQuery非依存で一番スターの多い Choices.js ですが、ドロップダウン内で「現在選択中の要素」の色だけ変更したいような場合、標準ではそのような機能が備わっていないようでした。最後にhoverした要素に「.is-highlighted」クラスが付与されるだけのようです。
ということで雑ですが対応しました。v2.7.6 で動作確認しています。jQuery非依存のライブラリなのに結局jQuery使ってますけど…(笑)誰かの役に立てば。
$('select').each(function () {
var Choice = new Choices($(this)[0], {
search:false,
shouldSort:false,
});
/**
* 選択中の要素にis-highlighted
*/
Choice.passedElement.addEventListener('showDropdown', function (event) {
var values = Choice.getValue();
var $dropdown = $(this).parent().parent().children('.choices__list--dropdown');
$dropdown.find('.choices__item--choice').each(function () {
$(this).removeClass('is-highlighted');
if($(this).data('id') === values.choiceId) {
$(this).addClass('is-highlighted');
}
});
}, false);
});
なお、iOSで上手く選択できない場合は、cursor: pointer;をつけましょう。
.is-active {
cursor: pointer;
}