Select2 Practice Summary

1, mainly rely on

<link rel= "stylesheet" href= "/css/select2.min.css" >

<script src= "/js/select2.min.js" ></script>

<script src= "Http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" ></script>

2. Main code

Continent (*) Country (*) City Scenic Area (*)

3, the main effect, with front and rear linkage effect 650) this.width=650; "Src=" http://s3.51cto.com/wyfs02/M00/87/00/ Wkiom1fq1mqi2x1haab9gulpbl0333.png "title=" Figure 3.png "alt=" Wkiom1fq1mqi2x1haab9gulpbl0333.png "/>

4. Initialize JS

Continents $ ("#sel_menu2"). Select2 ({    tags: true,    placeholder:   "Please select a continent",    ajax: {                  //access to Continents         url:  "/ Stock/getareas ",        datatype:  ' json ',         delay: 250,        processResults:  function  (data, page)  {             Console.log (data);             var parsed  = data;            var arr =  [];            for (var x in  parsed) {                 arr.push (Parsed[x]);  // This should be a JSON object             }             console.log (arr);             return {                 results: arr             };        }    }});

City $ ("#sel_menu3"). Select2 ({    tags: true,     maximumselectionlength: 10, //can select the maximum number of     placeholder:  "Please select City",     ajax: {                  //access to Continents         url:  "/stock/htgetarealines ",        datatype:  ' json ',         delay: 250,        data: function  ()  {             return {                 areaid: $ ("#sel_menu2"). Select2 (' Data ') [0].id // search term             };        },        processresults: function  (data,  page)  {            console.log ($ ("#sel_ Menu2 "). Select2 (' data ') [0].id];             Console.log ($ ("#sel_menu2"). Select2 (' data ') [0]);             var parsed = data;             var arr = [];             for (var x in parsed) {                 arr.push (Parsed[x]);  //this should be a JSON object              }             Console.log (arr);             return {                 results: arr             };        }     }});

City Scenic Area $ ("#sel_menu4"). Select2 ({    tags: true,     maximumselectionlength: 10, //can select the maximum number of     placeholder:  "Please select City Scenic Area",     ajax: {                  //Get Continents         url:  "/stock/getsceniccity" ,        datatype:  ' JSON ',         delay: 250,        data: function  ()  {             return {                 areaid: $ ("#sel_menu2"). Select2 (' Data ') [0].id, // search term                 cityiD:function () {                     var citystr= ""                      var city = $ ("#sel_menu3"). Select2 (' data ') );                     for (var i=0;i<city.length;i++) {                         if (I+1==city.length) {                             citystr +=city[i].id;                          }else{                             citystr +=city[i].id+ ",";                          }                     }                     return citystr;                 }             };        },         processResults: function  (data, page)  {            &nbsP;console.log ($ ("#sel_menu2"). Select2 (' data ') [0].id];             console.log (data);             Var parsed = data;            var  arr = [];            for (var  x in parsed) {                 arr.push (Parsed[x]);  //this should be a JSON object              }            console.log (arr);             return {                 results: arr             };        }    }}); 

Main points of attention:

Ajax requests are used to retrieve data asynchronously: The returned data is a request parameter

ProcessResults: Is the data returned, the format of the data format for JSON,SELECT2 initialization data is array:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/87/00/wKiom1fQ1zjSm1zVAACEBwZH1Ok233.png "title=" Figure 4.png "alt=" Wkiom1fq1zjsm1zvaacebwzh1ok233.png "/>

The data format for AJAX requests when initializing data echo on modification is:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/87/00/wKiom1fQ2GLx8rFKAAB3i6lSpH8230.png "title=" Tu5.png "alt=" Wkiom1fq2glx8rfkaab3i6lsph8230.png "/>

Selected: Controls whether the option is selected

Disabled: Controls whether you can select

When you click on a continent, a country, its subordinate affiliates purge the event:

$ (' #sel_menu2 '). On (' Change ', function () {$ (' #sel_menu3 '). val (null). Trigger ("Change");});

This article is from the "12019836" blog, please be sure to keep this source http://12029836.blog.51cto.com/12019836/1850629

Select2 Practice Summary