Bootstrap의 드롭다운 목록 선택에 대한 심층 분석

이 글에서는 초보자가 배우기에 적합한 부트스트랩의 드롭다운 목록 선택에 대해 자세히 소개하겠습니다. 모두에게 도움이 되길 바랍니다!

서문: 저는 수년 동안 Android를 개발해 왔으며 처음부터 웹 프런트엔드를 배우기 시작했습니다. 또한 많은 블로그가 기본적으로 복사 및 복제되어 명확하지 않다는 사실도 발견했습니다. 그래서 현재 블로그에 제가 불명확하다고 느끼는 것들을 적어보는 데 집중했습니다. Vue 프레임워크를 배운 후 네이티브 공식 웹사이트 개발을 배우기 시작했습니다. 그러나 Bootstrap의 선택을 알게 되었을 때 온라인 정보가 초보자에게는 매우 혼란스럽다는 것을 느꼈습니다. 그러므로 이 기사. [관련 추천: "부트스트랩 튜토리얼"]

사전 조건

물론 여기서는 부트스트랩과 jQuery를 소개해야 합니다

    <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">

1. 기본 단일 항목 선택 드롭다운 목록

그냥 gif를 업로드하세요. 먼저 렌더링합니다

1.1 html 코드

        <select id="selectLeo" class="form-control form-control-placeholder">
            <option value="-1" disabled selected hidden>请选择</option>
            <option value="0" style="color: black;">蕾丝</option>
            <option value="1" style="color: black;">黑丝</option>
            <option value="2" style="color: black;">肉丝</option>
            <option value="3" style="color: black;">杜蕾斯</option>
            <option value="4" style="color: black;">青椒肉丝</option>
        </select>

• form-control은 부트스트랩과 함께 제공되는 CSS 스타일입니다
• 자리 표시자가 없다는 것을 알게 되면 다음과 같은 방법으로 자리 표시자를 추가할 수 있습니다

<option value="-1" disabled selected hidden>请选择</option>

• placeholder 색상 값이 비교적 밝은데 CSS, form-control-placeholder

.form-control-placeholder{
    color: #ccc;
}

• 를 추가하면 드롭다운 목록의 색상 값도 변경된 것을 확인할 수 있습니다. 그런 다음 옵션에 자체 색상 값을 추가하면 변경되지 않습니다.

style="color: black;"

1.2 js 코드를 모니터링하여 값을 가져옵니다.

• 값을 선택하면 재설정을 클릭하면 상자가 검은색으로 변합니다. 회색으로 돌아갑니다. 이때 입력 상자에 대한 모니터를 만듭니다. value==-1이면 회색이 됩니다. 이 리스너는 재설정을 클릭해도 트리거되지 않으므로 회색으로 변할 때 재설정 메소드에 넣습니다. black_color와 grey_color는 두 개의 CSS 스타일입니다. 그 안에는 색상 값만 있습니다

    $("#selectLeo").on('change', function () {
        if ($(this).val() != -1) {
            //这里是默认的
            $('#selectLeo').addClass('black_color').removeClass('gray_color')
        }
    })

• 제출 버튼을 클릭하면 현재 선택된 값을 가져오고, text 값은 제가 배치한 두 개의 표시 텍스트입니다

    $('#submit_single_select').click(function () {
        var options = $('#selectLeo option:selected')
        $('#singleValue').html('当前选中的value: '+options.val())
        $('#singleText').html('当前选中的text: '+options.text())
        console.log(options.val())
        console.log(options.text())
    })

• 클릭 재설정할 때 자리 표시자로 돌아가서 색상을 다시 회색으로 변경해야 합니다

    $('#submit_single_repet').click(function () {
        var options = $('#selectLeo option')
        options[0].selected = true
        $('#selectLeo').addClass('gray_color').removeClass('black_color')
    })

1.3 드롭다운 목록 수정 방법: hover

마우스를 위로 이동합니다. 기본값은 흰색입니다. 글꼴과 밝은 파란색 배경입니다. 처음 배우기 시작할 때 많은 정보를 찾았지만 대부분 말도 안 되는 내용이었기 때문에 여기 CSS 스타일을 간결하게 수정한 전문가가 있다면 댓글란에 알려주시기 바랍니다. 여기에는 계획이 있습니다. 즉, 입력+드롭다운 메뉴를 사용하여 이 드롭다운 목록 기능을 구현할 수 있습니다. 이 경우 마우스오버를 원하는 대로 변경할 수 있습니다.

자, 단방향 드롭다운 목록 선택은 끝났습니다. 당신은 이해하지 못합니다.

2. 다중 선택, 드롭다운 목록

마찬가지로 먼저 gif 렌더링으로 가보겠습니다

이 다중 선택 드롭다운 목록을 사용할 때 부트스트랩도 참조해야 합니다. select, 초보자를 위한 공식 웹사이트에서 부트스트랩의 전체 패키지를 인용하고 이 select를 포함하지 않는 이유가 조금 이상하다고 생각합니다. 이 select의 github 주소는 bootstrap-select, 다음과 같이 인용됩니다.

<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

2.1 html 코드

        <select multiple="multiple" id="selectLeo_more" class="selectpicker form-control" title="请选择">
            <option value="0">蕾丝</option>
            <option value="1">黑丝</option>
            <option value="2">肉丝</option>
            <option value="3">杜蕾斯</option>
            <option value="4">青椒肉丝</option>
        </select>

• multiple="multiple"을 통해 다중 선택으로 설정; class="selectpicker form-control"은 부트스트랩 고유의 CSS 스타일입니다. title="선택하세요"는 자리 표시자입니다
• 다음 CSS 스타일을 통한 자리 표시자

.filter-option-inner-inner{
    color: #ccc;
}

• 아래 CSS 스타일을 사용하여 드롭다운 목록의 글꼴 색상을 변경하세요

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: black;
    white-space: nowrap;
}

• 아래 CSS를 사용하여 마우스를 위로 이동한 후 글꼴 및 배경색 표시를 변경하세요

.dropdown-menu>li>a:hover {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: white;
    white-space: nowrap;
    background-color: rgba(75, 62, 255, 0.767);
}

자, 스타일 완성

2.2 다중 선택 모니터링 및 값 획득 ​​

• 다중 선택 드롭다운 목록 모니터링 여기서 모니터링할 때 선택 값이 있을 때 글꼴. 색상은 검은색으로 변경되며, 값이 없을 경우 회색으로 변경됩니다. 재설정할 때 이 모니터링이 효과적입니다

    $('#selectLeo_more').on('change', function () {
        if ($(this).val().length != 0) {
            //这里是默认的
            $('.filter-option-inner-inner').css("color", "black")
        } else {
            $('.filter-option-inner-inner').css("color", "#ccc")
        }
    })

• 제출을 클릭하면 선택한 값이 나옵니다

    $('#submit_mult_select').click(function () {
        $('#multValue').html('当前选中的value: '+$('#selectLeo_more').val())
        $('#multText').html('当前选中的text: '+$('[data-id|=selectLeo_more').text())
        console.log($('#selectLeo_more').val())
    })

• 재설정을 클릭하면 입력 상자가 지워집니다.

    $('#submit_mult_repet').click(function () {
        $('#selectLeo_more').selectpicker('deselectAll');
    })

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문을 방문하세요! !

위 내용은 Bootstrap의 드롭다운 목록 선택에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!