「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;
}