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

This article will give you a detailed introduction to the drop-down list selection inBootstrap, 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

1. Basic single-item selection drop-down list

Directly upload the gif rendering

1.1 HTML code

  蕾丝 黑丝 肉丝 杜蕾斯 青椒肉丝 

• 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

• 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

2.1 The code on html

 蕾丝 黑丝 肉丝 杜蕾斯 青椒肉丝 

• 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!