Based on the jquery dropdown selection box plug-in supports the single select multiple selection function code _jquery

As a result of the recent project requirements, need to do a drop-down selection box plug-ins, support the radio display form data, multiple selection of display table data, the plug-in mainly used jquery and Jqgrid and Easyui.

Below to show you the effect of the picture, if you feel good, please refer to the implementation code:

Multiple selections: Rendering lists

The specific code looks like this:

/** * Dropdown Box Plugin-chooselist * The way to invoke Plug-ins and format: * 1. First you need to create a div panel and give the div the ID * 2. Call the plugin where you need it: * Parameter Description: * $ ("#divID"). Choos Elist ({* Query_url: The URL that loads the dropdown data, specifies the controller address you write, and if the URL is empty, use the default URL provided by the plugin * Divid:divid * sidx: Sort field, default offender number * Sord 
   : Sort type, default desc * postdata:postdata: {filters:JSON.stringify (filters)} Custom query criteria * Filters format is as follows * var rules = []; 
   Rules.push ({"Field": "Gydwname", "OP": "CN", "Data": "XXXX"}); 
   var filters = {"Groupop": "and", "Rules": rules}; IsMultiSelect: Multiple selections, default Radio False * *}) * * */function ($) {$.fn.extend ({chooselist:function) (optio 
      NS) {//Generate random number var random =math.floor (Math.random () *100000+1); /** * Custom parameters, which need to use the properties directly: Customparams. Property name/var Customparams = {resultobj: {},//Store the number of selected selections It is returned to the outside caller to use the Resultlistobj:new map ()///To store the multiple selected selected data, and return it to the outside caller using the currenttag:this,//current Label object form 
    ID: "Form_" +random, Chooseid: "sel" + "_" +random,//the ID of the Drop-down selection box    Gridid: "Grid" + "_" +random,//datagrid ID Pager: "pager" + "_" +random,//page ID countrow:0//count line number, default is 0 
      }; 
        /** * Parameters and Defaults/var defaults = {_search: ' false ',///If no URL is passed in, then query using the default URL Query_url:contextpath + "/choosecriminal", Sidx: "BH",//Sort field, default according to the number of the offender BH Sord: "desc",//Sort type: Ascending, descending, default drop 
      Sequence ismultiselect:false,//whether multiple selections, default single selection};  
      /** * Load silently parameters and descendants of the Parameter object * * var options = $.extend (defaults, options); /** * Parse Load parameter * @param query_url request Address * @param flag identity is the first time to load a table or a Fuzzy query load table data * * * var BINDP Arams = function (Query_url) {var params= "";//Store resolved parameter for (var attr in options) {var key = attr 
          ; 
          var value = options[attr]; if (Value!= "" &&! ( Value instanceof Object) &key!= "Query_url" &&key!= "divID" &&key!=false) {params+=key+ "=" +val 
       Ue+ "&"   }else if (value instanceof Object) {Params+=$.param (value) + "&"}else if (key== "_search" & 
          &value==false) {params+=key+ "=false&"; } var finalparams =query_url+ "?" 
        +params.substring (0,params.length-1); 
       return finalparams; 
     }; /** * Binding Select offender Combogrid/var Rendercombogrid = function () {$ ("#" +customparams.chooseid). com Bogrid ({panelwidth:500, IDfield: ' bh ',//id textField: ' XM ',//input display value Pagina tion:true,//whether pagination pagesize:10,//the number of record bars displayed per page, default to rownumbers:true,//serial number Url:bindparams (Options.query_url), method: ' Get ', fitcolumns:true, columns: [[{field: ' XM ', title: ' Name ', width:80}, {field: ' bh ', title: ' Number ', width:120}, {field: ' Gydwname ', title: ' Unit ', width:80 },]], keyhandler:{query: function (keyword) {//dynamic search var value =keyword;  Load Dynamic input parameter if (options.postdata!=null&&options.postdata!=undefined) {var oldrules 
                 = Json.parse (options.postData.filters); var newrules =[{"Field": "XM", "Op": "CN", "Data": Value}, (Oldrules.rules 
                  ) [0]]; 
                  var filters = {"Groupop": "and", "Rules": newrules};  
               options = $.extend (defaults, {postdata: {filters:JSON.stringify (filters)}}); 
                      }else{var newrules =[{"Field": "XM", "Op": "CN", "Data": Value}  
                  ]; 
                  var filters = {"Groupop": "and", "Rules": newrules};  
               options = $.extend (defaults, {querydata: {filters:JSON.stringify (filters)}}); //Set the value entered into the input box $ ("#" +customparams.chooseid). Combogrid (' sEtvalue ', value);  
                        Re-request background load Table $ ("#" +customparams.chooseid). Combogrid ("Grid"). DataGrid ({Url:bindparams (Options.query_url)}); }, Onselect:function () {//checked event var bh= $ ("#" +cust 
                Omparams.chooseid). Combogrid (' Grid '). DataGrid (' getselected '). bh;//gets the number of the selected row data//details of the offender based on the offender's number Ajax 
                  $.ajax ({type: ' POST ', Url:contextpath + '/chooselist/query '), 
                    Data: {BH:BH}, success:function (data) {//Fill form 
                    Platformui.populateform (customparams.formid, data); 
                    A numeric convertdateobject (data) containing the type of time in the Transform object; Determines whether the current user refers to a radio or multiple-Select if (options.ismultiselect==false) {//Radio $.extend (Customparam 
                    S.resultobj, data); 
                       }else{//multiple selectionAddrowdata (data);  
                    $.extend (customparams.resultlistobj, data); 
              } 
                    }  
                  }); 
        }  
            }); 
     }; /** * Add table row Information * @param data DataSet/var Addrowdata = function (data) {//To determine if the current object already exists res In Ultesobj, if it exists, it is not saved, whereas the IF (! 
          Customparams.resultListObj.containsKey (DATA.BH))) {customparams.resultListObj.put (data.bh,data); 
          Get row data var RowData = {xm:data.xm, bh:data.bh, gydwName:data.gydwName}; 
          Customparams.countrow = customparams.countrow+1; 
           Add Line $ ("#" +customparams.gridid). Addrowdata (Customparams.countrow, RowData); var Totalrecord = Customparams.resultListObj.size (),//total number of bars}else{//Hint toastr.warning ("Data has been selected 
          Optional! "); 
        Return 
     } 
     }; 
    /** * Delete Row Specify column * @param BH number * @param rowId line ID * * var deleterow = function (Bh,rowid) {//delete element Customparams.resultListObj.remove (BH) in the collection; 
        Deletes the row in the table $ ("#" +customparams.gridid). Delrowdata (RowId);  
             Change row number customparams.countrow = Customparams.countrow-1; 
       };  
         /** * Convert object timestamp type to YYYY-MM-DD String * @parma data data/var Convertdateobject = function (data) { if (data.rjrq!=null&&data.rjrq!=undefined) {$ ("#rjrq"). Val (datetostring (New Date (DATA.RJRQ)) 
         ); } if (data.csrq!=null&&data.csrq!=undefined) {$ ("#csrq"). Val (datetostring) (New Date DATA.CSRQ  
         ))); } if (data.dqxqqr!=null&&data.dqxqqr!=undefined) {$ ("#dqxqqr"). Val (datetostring (New Date data 
         . Dqxqqr)); } if (data.dqxqzr!=null&&data.dqxqzr!=undefined) {$ ("#dqxqzr"). Val (datetostring new Date (DAT 
         A.DQXQZR))); 
      } 
      }; /** * DayPeriod type converted to string format YYYY-MM-DD * @param datein Conversion Object * */var datetostring = function (Datein) {return datein.getfullyear () + '-' + (Datein.getmonth () + 1 >= 10?) 
                Datein. GetMonth () + 1: ' 0 ' + (datein.getmonth () + 1)) + '-' + (Datein.getdate () >= 10? 
      Datein.getdate (): ' 0 ' + (datein.getdate ()); 
       }; 
         /** * Custom Map */function map () {this.elements = new Array (); 
          Gets the size of the map this.size = function () {return this.elements.length; 
          //determine if NULL This.isempty = function () {return (This.elements.length < 1); 
          }//Empty this.clear = function () {this.elements = new Array (); ///Map an object this.put = function (_key, _value) {This.elements.push ({key: _key, Value: _value}); 
            ///Remove an object This.remove = function (_key) {var bln = False by key; try {for (i = 0; i < this.elements.length i++) {if (This.elements[i].key = = _key &am 
                  p;& typeof This.elements[i].key = = typeof _key) {This.elements.splice (I, 1); 
                return true; 
            catch (e) {bln = false; 
          Return bln; An Object this.get = function (_key) {try {for (i = 0; i < THIS.E) is obtained by key Lements.length; 
                  i++) {if (This.elements[i].key = = _key && typeof this.elements[i].key = typeof _key) { 
                return this.elements[i].value; 
     catch (e) {         return null; }//Return an object of the specified index this.element = function (_index) {if (_index < 0 | | _ind 
            Ex >= this.elements.length) {return null; 
          return This.elements[_index]; 
            //Whether contains the key This.containskey = function (_key) {var bln = false; try {for (i = 0; i < this.elements.length i++) {if (This.elements[i].key = = _key &am 
                p;& typeof This.elements[i].key = = typeof _key) {bln = true; 
            catch (e) {bln = false; 
          Return bln; 
            //whether contains value This.containsvalue = function (_value) {var bln = false;  try {for (i = 0; i < this.elements.length i++) {if (This.elements[i].value = = _value && typeof This.elements[i].value = = typeof _value) {bln = true; 
            catch (e) {bln = false; 
          Return bln; 
            //Get all values this.values = function () {var arr = new Array (); 
            for (i = 0; i < this.elements.length i++) {Arr.push (this.elements[i].value); 
          return arr; 
            //Get all the key This.keys = function () {var arr = new Array (); 
            for (i = 0; i < this.elements.length i++) {Arr.push (This.elements[i].key); 
          return arr; 
     } 
      }; 
      /** * Render Panel View */var Renderpanelview = function () {var html = ""; 
      html+= "Please choose: <input id= '" +customparams.chooseid+ "' style= ' width:200px '/> '"; 
      html+= "<form id= '" +customparams.formid+ "' >"; html+= "&LT;table> "; 
      html+= "<tr>"; 
      html+= "<th> name:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' xm ' name= ' xm '/></td>; 
      html+= "<th> number:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' bh ' name= ' bh '/></td> '; 
      html+= "<th> unit:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' gydwname ' name= ' gydwname '/></td> '; 
      html+= "<th> time:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' rjrq ' name= ' rjrq '/></td> '; html+= "<td rowspan= ' 7 ' style= ' text-align:center ' ></td> '; 
      html+= "</tr>"; 
      html+= "<tr>"; 
      html+= "<th> Birth date:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' csrq ' name= ' csrq '/></td> '; html+= "<th> ID number:</th>" html+= "<td><input style= ' border-left:0px;border-top:0px;border-right 
      : 0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' Sfzh ' name= ' sfzh ' '/></td> '; html+= "<th> original sentencing period:</th>" html+= "<td><input style= ' Border-left:0px;border-top:0px;border-right" 
      : 0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' xq ' name= ' xq ' '/></td> '; html+= "<th> Current term:</th>" html+= "<td><input style= ' border-left:0px;border-top:0px;border-right 
      : 0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' dqxq ' name= ' dqxq ' '/></td> '; html+= "&LT;/TR&Gt; "; 
      html+= "<tr>"; 
      html+= "<th> sentence from day:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' dqxqqr ' name= ' dqxqqr '/></td> '; 
      html+= "<th> imprisonment for the day:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' dqxqzr ' name= ' dqxqzr '/></td> '; 
      html+= "<th> department meets Grade:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' cydjname ' name= ' cydjname '/></td> '; html+= "<th> type:</th>" html+= "<td><input style= ' Border-left:0px;border-top:0px;border-right" 
      : 0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' fylxname ' name= ' fylxname ' '/></td> '; 
      html+= "</tr>"; 
      html+= "<tr>"; Html+= "<th> The Punishment:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' yx ' name= ' yx '/></td> '; 
      html+= "<th> police experience </th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' jjjlname ' name= ' jjjlname '/></td> '; 
      html+= "<th> Special tube category:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' tglb ' name= ' tglb '/></td> '; html+= "<th> tired habitual offender:</th>" html+= "<td><input style= ' border-left:0px;border-top:0px;border-right: 0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' lgfenum ' name= ' lgfenum ' '/></td> ' </tr> ' html+= ' 
      ; 
      html+= "<tr>"; 
      html+= "<th> Whether old offender:</th>"; html+= "&LT;TD&GT;&LT;input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' 
      Issflf ' name= ' issflf '/></td> '; 
      html+= "<th> whether ill commit:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' issfbf ' name= ' issfbf '/></td> '; 
      html+= "<th> whether the residual offender:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' issfcf ' name= ' issfcf '/></td> '; 
      html+= "<th> Whether it is dangerous to commit:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' issfwxf ' name= ' issfwxf '/></td> '; 
      html+= "</tr>"; 
      html+= "<tr>"; 
      html+= "<th> post:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0pxborder-right:0px;border-bottom:1px ' readonly= ' true ' type= ' text ' id= ' iszwf ' name= ' iszwf ' '/></td> '; 
      html+= "<th> home address:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' familyaddressdetail ' name= ' familyaddressdetail '/></td> '; 
      html+= "<th> crime:</th>"; html+= "<td><input style= ' border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' readonly= ' 
      True ' type= ' text ' id= ' Accusationid ' name= ' Accusationid '/></td> '; 
      html+= "</tr>"; 
      html+= "</table>"; 
      html+= "</form>"; 
       $ (Customparams.currenttag). append (HTML); 
      Rendercombogrid (); 
      }; /******************* render Dtagrid Part *********************//** * render DataGrid Table * * * var rendergrid = f 
        Unction () {var gridhtml = ""; gridhtml+= "Please choose the criminal: <input id= '" +customparams.chooseid+ " style= ' width:200px '/> '; 
        gridhtml+= "<div>"; 
        gridhtml+= "<table id= '" +customparams.gridid+ "' ></table>"; 
        gridhtml+= "<div id= '" +customparams.pager+ "' ></div>";  
        gridhtml+= "</div>"; 
        $ (Customparams.currenttag). Append (gridhtml); 
        Rendercombogrid (); 
      Initdatagrid (); 
      }; 
          /** * Load DataGrid table data */var Initdatagrid =function () {$ ("#" +customparams.gridid). Jqgrid ({ DataType: ' Local ', Autowidth:true, height:300, colnames: ["Name", "number", "unit", "Damn As "], Colmodel: [{name:" XM ", Index:" XM ", Align:" center ", width:50,sortable:true}, { Name: "BH", Index: "BH", Align: "center", Width:50, sortable:true}, {name: "Gydwname", Index: "Gydwname", align  
            : "Center", width:50,sortable:true}, {name: "Customcolumn", Formatter:function (Cellvalue, Options, Rowobject) {  var obj = "{bh:" + "" "+ rowobject.bh +" \ "+", RowId: "+" \ "" + Options.rowid + "\" + "}"; var columntemplate = "<span class= ' btn_orange innerdelbtn ' name= '" + obj + "' > Delete </span>" return  
            Columntemplate; }, align: "center", Width:50,search:false,sortable:false}], Sortname: "BH", Sortorde R: "desc", rownumbers:true,//add left line number viewrecords:true, Gridview:true, Autoenc 
          Ode:true, Caption: "Offender Information List", Gridcomplete:function () {bincompleteevent (); 
      } 
        }); 
      }; /** * Load the table binding event/var bincompleteevent =function () {//To bind the action Bar to a point-click event $ (". Innerdelbtn") 
          . Click (function (e) {var obj = eval ("+ $ (e.target). attr (" name ") +") "); 
        DeleteRow (OBJ.BH, Obj.rowid); 
         }); Select the row mouse into the hand type var ids=$ ("#" +customparams.gridid). Jqgrid (' GEtdataids '); 
            for (var i = 0; i < ids.length i + +) {var id = ids[i]; 
           $ ("#" +id). attr ("style", "cursor:pointer"); /******************* render Dtagrid Partial end *********************//** * Render View according to type * * VA R Renderview = function () {//IsMultiSelect to judge that rendering View Options.ismultiselect==true?rendergrid (): Renderpanelv 
      Iew (); 
      }; 
     /*** * Initialization entrance/renderview (); Use ternary expressions to determine whether returns should be a single object or multiple objects return Options.ismultiselect==false?customparams.resultobj:customparams.resultlistobj 
    ; 
  } 
    });  }) (JQuery);

The above is a small part of the introduction of the jquery based on the selection box Plug-ins to support the selection of multiple optional function code related content, I hope to help you!