How to use the drop-down list select in Bootstrap

Editor to share with you how to use the drop-down list select in Bootstrap, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

prerequisite

Of course, we're going to introduce Bootstrap and jQuery here.

1. Basic individual selection drop-down list

Go directly to the gif effect picture first.

1.1 Code on html Please select lace, black silk, shredded meat, Durex Sautéed Shredded Pork with Green Pepper

Form-control is the css style that comes with bootstrap

We will find that she lacks placeholder. We can add a placeholder to him in this way.

Please select

The color value of placeholder is relatively light, so let's add a css,form-control-placeholder to him.

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

After adding it, you will find that the color values in the drop-down list have changed accordingly. Then we can add our own color value to option so that it won't change.

Style= "color: black;" 1.2 js code listens and gets values

When we select the median value, the box will turn black, and if you click reset to change it back to gray, then make a monitor on the input box, if value==-1 is gray. The monitor is not triggered when you click reset, so I grayed out and put it in the reset method. Black_color and gray_color are two css styles with only color values

$("# selectLeo") .on ('change', function () {if ($(this). Val ()! =-1) {/ / here is the default $(' # selectLeo'). AddClass ('black_color'). RemoveClass (' gray_color')}))

When I click the submit button, I get the currently selected value and text values. SingleValue and singleText are the two display texts I placed.

$('# submit_single_select') .click (function () {var options = $('# selectLeo option:selected') $('# singleValue'). Html ('currently selected value:' + options.val ()) $('# singleText'). Html ('currently selected text:' + options.text () console.log (options.val ()) console.log (options.text ())}))

When we click reset, we need to go back to placeholde and change the color 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 a white font, light blue background. When I was a beginner, I found a lot of information, which is basically nonsense, so if there is a big god who has succinctly modified the css style, you can tell me in the comments area. I have a solution here, that is, you can use the input+ drop-down menu to achieve this drop-down list function, so hover can change whatever you want.

All right, the one-way drop-down list selection is over. You can't be confused.

2. Multiple choices, drop-down list

Again, let's take a gif effect picture first.

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

2.1 the code on html is lace, black silk, shredded meat, Durex Sautéed Shredded Pork with Green Pepper

Set to multiple selections via multiple= "multiple"; class= "selectpicker form-control" is bootstrap's own css style; title= "Please choose" is our placeholder.

Change the color value of placeholder through the following css styles

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

Through the bottom, change the display of the font and background color after the mouse is moved 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);}

All right, this completes the style.

2.2 multiple-choice select snooping and obtaining values

Multi-select the listener of the drop-down list. When the listener has a selection value, the font color is changed to black and gray when there is no value. This is a little different from the single selection. When the monitor is reset, the monitor is effective.

$('# selectLeo_more') .on ('change', function () {if ($(this). Val (). Length! = 0) {/ / here is the default $(' .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 ('currently selected value:' + $('# selectLeo_more'). Val ()) $('# multText'). Html ('currently selected text:' + $('[data-id | = selectLeo_more') .text () console.log ($('# selectLeo_more'). Val ()}))

Clear the input box when you click reset

$('# submit_mult_repet') .click (function () {$('# selectLeo_more'). Selectpicker ('deselectAll');}) these are all the contents of the article "how to use select in Bootstrap". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!