3KB jquery code Take care of the implementation methods of various tree-shape selection _jquery

Self-made jquery Tree selection plugin.

To deal with a variety of tree-type selection (provinces and cities, classification. 90 lines of jquery code buttoned up, less nonsense directly on the plugin code. The instructions for using are described later. is a condensed version of a plugin that was previously written.

1.Jquery Plug-in Code

(function (j) {j.fn.attrs = function (option) {var root = this, data = []; Default parameter var def = {url: '/ajax/getsort/', str:root.attr ("str") | | ' 0 ', handel:function (v) {return "<option value=" + v.id + ">" + v.type + "</option>"}, Path:ro Ot.attr ("val") | |
    0, Schar: ', ', Change:function (v) {}};
    Parameter Merge def = J.extend ({}, def, option); Initialize Ispath ()?
    Init (): Create (DEF.STR);
      Request classification and select the function Create (ID, O, v) {if (!id | | parseint (id) = = 1) return O.nextall (). remove ();
      Create select var select = J ("<select></select>"). Hide ();
      _b (select);
      Add to the container if (o) o.nextall (). remove ();
      Root.append (select);
        Initiate Ajax request J.ajax ({type: "Get", Url:def.url, data: {Id:id}, DataType: "JSON",
        Cache:true, Success:function (JSON) {datainit (SELECT, JSON, V); }})} functionDatainit (SELECT, data, V) {_c (SELECT, data). val (v | |-1);
        if (Select.children ("option"). Length <= 1) {select.remove ();
      Return
    else select.removeattr ("style"); //Determine if the Format function Ispath () {return def.path &&/^ (\d{1,},) *\d{1,}$/.test (Def.path) && D
    Ef.path!= ' 0,0,0 ';
      //Create Value function _v () {var v = new Array (), Vtext = new Array ();
      V.push (0);
          Root.children ("select"). each (function () {if (J (). Val () > 0) {v.push () (j). Val ());
      Vtext.push (J (This). Children ("option[selected]"). Text ()}}) Root.attr ("Val", V.join (', '));
      Root.attr ("Vtext", Vtext.join (">"));
    Def.change (v);
        }//Initialize function init () {if (Ispath ()) {var list = Def.path.split (Def.schar);
        for (var i in list) {Create (list[i], NULL, list[++i]);
      } return; Alert ("ErroR: Classification Error! ")}//Binding event function _b (select) {select.bind (" Change ", function () {Create (J). Val (), J (th
        is));
      _v (); }///Create dropdown box function _c (SELECT, data) {Select.append (J ("<option value= '-1 ' >== Please select ==</option&gt
      ;"));
      for (var i = 0; i < data.length i++) {select.append (J (Def.handel (Data[i)));
    return select; }
  }
})($)

2. Dealing with provincial and municipal options

3. To deal with all kinds of pain in your eggs unlimited level of choice

4. How to use

<div id= "attr" ></div>
<script type= "Text/javascript" >
(Function ($) {
$ ("#attr"). attr (
 {
 URL: '/ajax/getsort/',//ajax get URL server returns JSON data
 str:root.attr ("str") | | ' 0 ',//Get the initialized category path. For example: 23,45,90. The
 handel:function (v) {//Data processing callback function can be restored correctly in the case of editing, indicating how to parse the background data. such as [{id:32,type: "category"}] return
   "<option value=" + v.id + ">" + v.type + "</option>"
  },
 Path:root . attr ("val") | | 0,
 Schar: ', ',//path split character if, path is 23|45|90 ' | '
 Change:function (v) {}//selection box Modify processing event
  };
;
}) (jQuery)
</script>

The above 3kb jquery code to handle a variety of tree-shaped choice to achieve the method is to share the whole of the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.