JS Component Bootstrap Select2 use method _javascript skills

When we introduced the Select component, I shared an article about the bootstrap MultiSelect two components in a JS component , and the two components were really powerful, and this article shared some of the usage and features of the next select component.
Some general radio, multiple selection, grouping and other functions are not introduced here, MultiSelect this aspect is the strength. This paper focuses on some characteristics of the following select2:
first, the characteristic effect
1, multiple selection effect

Can be set up to only select a few

2, graphic combination of the effect

3, remote search function (that is, when the user input search content dynamic to the background to fetch data)
Before entering content

Enter space to search out all

The scroll bar slides to the bottom to automatically load the remaining items

Input text dynamic to background filter

More advanced uses such as:

In fact, it is not difficult to use, is a process of spelling HTML.

Second, the code example
1, multiple selection effect
Select2 is easy to select, set a property is good.

<script src= "~/scripts/jquery-1.10.2.js" ></script> <script src= "~/content/bootstrap/js/" Bootstrap.js "></script> <link href=" ~/content/bootstrap/css/bootstrap.css "rel=" stylesheet "/> < Script src= "~/content/select2-master/dist/js/select2.js" ></script> <link href= "~/content/ Select2-master/dist/css/select2.css "rel=" stylesheet "/> <select id=" sel_menu2 "multiple=" multiple "class=" Form-control "> <optgroup label=" System settings > <option value= "1" > User management </option> <option value= "2" > Role management </option> <option value= "3" > Departmental management </option> <option value= "4" > Menu Management </option> </ optgroup> <optgroup label= "Order Management" > <option value= "5" > Order query </option> <option value= "6" > Order Import & lt;/option> <option value= "7" > Order deletion </option> <option value= "8" > order Revocation </option> </ optgroup> <optgroup label= "basic data" > <option value= "9" > Basic Data Maintenance </option> &LT;/optgroup> </select>//Multiple option $ ("#sel_menu2"). Select2 ({tags:true, Maximumselectionlength:3//max. Number of Selections})

 ;

2, the effect of text binding

<select id= "Sel_menu" class= "js-example-templating js-states form-control" > <optgroup label= "System settings" > <o Ption value= "1" > User management </option> <option value= "2" > Role management </option> <option value= "3" > Departmental Management < /option> <option value= "4" > Menu management </option> </optgroup> <optgroup label= "Order Management" > <option V Alue= "5" > Order enquiry </option> <option value= "6" > Order import </option> <option value= "7" > Order deletion </ option> <option value= "8" > Order revocation </option> </optgroup> <optgroup label= "base data" > <option VA
 Lue= "9" > Basic Data Maintenance </option> </optgroup> </select> $ (function () {//Picture $ ("#sel_menu"). Select2 ({
Templateresult:formatstate, templateselection:formatstate});

});
 function Formatstate (state) {if (!state.id) {return state.text;} var $state = $ (' <span> ' + state.text + ' </span> ');
return $state;

 };

3, remote search feature (that is, dynamically go to the background to fetch data when user enters search content)

 <select id= "Sel_menu3" class= "Js-data-example-ajax Form-control" > <option value= "3620194" Selected > Please select </option> </select> $ (function () {//Remote filter $ ("#sel_menu3"). Select2 ({ajax: {URL: "/ho
  Me/getprovinces ", DataType: ' json ', delay:250, data:function (params) {return {q:params.term,//Search term
 Page:params.page};

 }, Processresults:function (data, params) {params.page = Params.page | | 1;
 return {results:data.items, pagination: {more: (Params.page *) < Data.total_count}}; }, Cache:true}, Escapemarkup:function (markup) {return markup;},//Let's our custom formatter work Gth:1, templateresult:formatrepoprovince,//omitted for brevity, and the source of this page Templateselection:forma
Trepoprovince//omitted for brevity, check the source of this page});



});
 function Formatrepoprovince (repo) {if (repo.loading) return repo.text; var markup = "<div>" +repo.name+ "</div> ";
return markup;

 }

One place to note here is the ProcessResults property corresponds to a method that has a more attribute for paging, where the value matches the number of values you need to display at once.

The background corresponds to the following methods:

Public list<string> lstprovince = new list<string> () {"Beijing", "Tianjin", "Chongqing", "Shanghai City", "Hebei province", "Shanxi province", "Liaoning province", "Jilin province", " Heilongjiang province "," Jiangsu province "," Zhejiang province "," Anhui province "," Fujian province "," Jiangxi province "," Shandong province, "Henan province", "Hubei province", "Hunan province", "Guangdong province", "Hainan Province", "Sichuan province", "Guizhou province", "Yunnan province", "Shaanxi province", "Gansu province", "Qinghai province", " Taiwan Province "," Inner Mongolia Autonomous Region "," Guangxi Zhuang Autonomous Region "," Tibet Autonomous Region "," Ningxia Hui Autonomous Region "," Xinjiang Uygur Autonomous Regions "," Hong Kong Special Administrative Region ";
 Public Jsonresult getprovinces (string q, String page)
 {
 var lstres = new list<province> ();
 for (var i = 0; i < i++)
 {
 var oprovince = new Province ();
 Oprovince.id = i;
 Oprovince.name = Lstprovince[i];
 Lstres.add (oprovince);
 }
 if (!string. IsNullOrEmpty (Q.trim ()))
 {
 lstres = lstres.where (x => x.name.contains (q)). ToList ();
 }
 var lstcurpageres = string. IsNullOrEmpty (page)? Lstres.take (a): Lstres.skip (Convert.ToInt32 (page) * 10-10). Take (ten);
 Return Json (New {items = lstcurpageres, Total_count = Lstres.count}, jsonrequestbehavior.allowget);
 }

It says so much, then how do we pick and assign values after selecting the SELECT2 option?

1, get the selected value

 var Omenuicon = $ ("#txt_menuicon_web"). Select2 ({
 placeholder: "Please select Menu icon",
 templateResult:oInit.formatState,
 templateSelection:oInit.formatState
 });
Omenuicon.val ();

2, set the selected value of Select2

 var Omenuicon = $ ("#txt_menuicon_web"). Select2 ({
 placeholder: "Please select Menu icon",
 templateResult:oInit.formatState,
 templateSelection:oInit.formatState
 });
 Omenuicon.val ("CA"). Trigger ("change");

If you want to further study, you can click here to learn, and then for everyone to attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap actual combat Tutorial Bootstrap plugin Use tutorial

The above is about select2 some characteristics of the effect of the introduction, I hope to help you learn.