>

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

<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

  • 답변 # 1

    코드에서 첫 번째 조건은 항상 참입니다. .btn  항상 요소에 있습니다. 이것을 시도하십시오 :

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

    첫 번째 클릭에서 .btn-default 를 제거합니다  수업 및 .btn-success 추가  수업. 두 번째 클릭에서는 그 반대가됩니다.

관련 자료

  • 이전 C #에서 CursorPosition을 PointF로 변경할 수 있습니까?
  • 다음 ruby on rails - PostgreSQL 오류,"pg_hbaconf 항목 없음"