javascript - 버튼 클래스를 btn-default에서 btn-success로 변경하는 방법

이 옵션은 버튼으로 여러 상자를 선택했습니다.

<select multiple class="form-control" onchange="selectedIds(this)" >
                            <option value="" onclick="selectUnselect(this)" class="btn btn-default">
                                option1
                            </option>
                        </select>

jQuery를 통해 클릭시 버튼 클래스를 변경합니다

$(document).ready(function () {
$(".form-control option").click(function () {
    if ($(this).hasClass('btn')) {
        $(this).toggleClass('btn-success');
    } else {
        $(this).toggleClass('btn-default');
    }
});

});

선택한 옵션의 버튼 색상을 녹색으로 변경하고 싶습니다 (예 : btn btn-success )   btn btn-default 에서 수업  사용자가 선택한 옵션을 다시 클릭하면 초기 색상으로 돌아갑니다.

단일 옵션을 클릭해도 제대로 작동하지만 여러 옵션을 선택하면 이전 버튼의 상단 색상이 파란색으로 변합니다. 이처럼

,

라이브 앱은 다음과 같습니다 : https://i2a.herokuapp.com/app/ 설문지/만들기/

사파리에서 옵션은 버튼으로 표시되지 않지만 Chrome에서는 버튼으로 표시됩니다

이 문제를 해결하는 데 도움이 될 수 있습니까? 감사합니다.

btn btn-default