In-depth analysis of drop-down list selection in Bootstrap

This article will give you a detailed introduction to the drop-down list selection in Bootstrap, which is suitable for beginners to learn. I hope it will be helpful to everyone!

Foreword: I have been developing Android for many years and started learning web front-end from scratch. I also found that many blogs are basically copied and reproduced, and they are not clear. So I focused on writing down the things that I feel are unclear on the current blog. After learning the Vue framework, I started to learn native official website development. However, when I learned about Bootstrap's selection, I felt that the online information was confusing, which was very confusing for beginners. Hence this article. [Related recommendations: "bootstrap Tutorial"]

Prerequisite

Of course we have to introduce Bootstrap and 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. Basic single-item selection drop-down list

Directly upload the gif rendering

1.1 HTML code

        <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 is the css style that comes with bootstrap
• We will find that it lacks a placeholder, we can add a placeholder to it in the following way

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

• The color value of placeholder is relatively light, so we add a css to it, form-control-placeholder

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

• After adding it, you will find the color in the drop-down list The value also changes accordingly. Then we can add our own color value to the option and it will not change

style="color: black;"

1.2 js code to monitor and obtain the value

• When we select the value, the box It will turn black inside. If you click Reset, it will turn back to gray. At this time, make a monitor for the input box. If value==-1, it will be gray. This listener will not be triggered when you click reset, so I put it in the reset method when it turns gray. black_color and gray_color are two css styles, in which there are only color values

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

• When you click the submit button, get the currently selected value and text value, singleValue and singleText are the two I placed Display 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())
    })

• When we click reset, we have to return to the placeholde and the color changes back to gray

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

1.3 How to modify the drop-down list: hover

Move the mouse up, the default is white font and light blue background. When I first started learning, I found a lot of information, but most of it was nonsense, so if there are experts here who have concisely modified the css style, you can tell me in the comment area. I have a solution here, which is to use the input drop-down menu to implement this drop-down list function. In that case, the hover can be changed however you want.

Okay, the one-way drop-down list selection is over. You don't understand.

2. Multiple selection, drop-down list

Similarly, first upload a gif rendering

When using this multi-select drop-down list, we also need to reference bootstrap-select. For me, a beginner, I find it a little strange why the official website quotes the full package of bootstrap and does not include this select. The select github address is: bootstrap-select, quoted as follows

<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 The code on 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>

• passes multiple="multiple "Set to multi-select; class="selectpicker form-control" is bootstrap's own CSS style; title="Please select" is our placeholder
• Change the color value of the placeholder through the following css style

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

• Change the font color of the drop-down list through the css style below

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

• Change the font and background color display after the mouse moves up

.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);
}

Okay, this completes the style

2.2 Multi-select select monitoring and obtaining values

• Multi-select drop-down list Monitoring, when the monitoring here has a selected value, the font color changes to black, and when there is no value, it changes to gray. This is a little different from the radio selection. When reset, this monitoring is effective

    $('#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")
        }
    })

• Click submit to get the selected value

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

• When you click reset, clear the input box

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

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of In-depth analysis of drop-down list selection in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!