This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

Take a look at the above effect used by Bootstrape. It’s not pretty, but it fits the style of Bootstrape. Let’s look at the normal select style

Select under Bootstrape versus normal select in bootstrape style

The introduction of

  • First of all we definitely have to introduce jS and CSS related to jQuery and Bootstrape, and on top of that we introduce two things
bootstrap-select.min.css
bootstrap-select.min.js
components-bootstrap-select.min.js
Copy the code

Page to write

  • The class attribute must contain bs-SELECT, and the select attribute contains the following attributes
Data-size ="6" (optional) id (mandatory)Copy the code

  • Data-live-search is used for search, which is not implemented in this chapter, but will be designed in detail later, but this attribute must be included. Source code according to his choice to search.

  • Data-size is the number set, meaning that the drop-down box contains more than a few items before the scroll bar starts to appear.

  • Id identifies the drop-down box

The Ajax request loads the SELECT data

  • Select in a project is loaded dynamically in most cases, so the next step is to discuss the loading of dynamic data. The first thing to do is to send the request. We then handle our dynamic data loading at the callback place after the Ajax request succeeds.
// Call the public interpolation method createSelectDate(siteDate,"site_id");Copy the code

createSelectDate

  • To do this we need to pass two parameters, the first is the data we want to load, and the second is the ID to load our data in select

  • Let’s take a look at our select after processing

  • A closer look reveals that UL is the data displayed on the page, and SELECT is our real data, so we only need to populate these two places with data.

Adding data to select is very simple. Add by ID,

  • The key is how to obtain the new select ul, after practice through the following method.
var $selectUl = $($($("button[data-id='"+select_id+"']").parent().children().get(1)).children().get(1));
Copy the code
  • Then add the content to the new object
$newSelect.append("<li data-original-index="+(index+1)+" class><a tabindex='0' class style data-tokens='null' role='option' aria-disabled='false' aria-selected='false'><span class='text'>"+value.site_name+"</span><span class='fa fa-check check-mark'></span></a></li>");
Copy the code

Clear select selected values

  • Now, when we use this, we’re going to have a problem, we’re not going to be able to clear the contents of our new select, so it’s going to be awkward. Study half a day decided to forcibly delete
= 'button' $(" button [role] [data - id = '" + select_id + "'] "). The attr (" title ", "select..." ); / / selected active $(" button [role = 'button'] [data - id = '" + select_id + "'] span: first "). The text (" select..." );Copy the code

Finally, we just need to call the corresponding method.