JS City Three-level linkage Ajax edition

Write a mess: own record, not to use!

(Function (W, $) {//define Selectsimulation constructor var selectsimulation = function (Ele, opt) {this. $element = Ele , this.defaults = {' Len ': 3, ' Def ': [], ' Ajax ': [], ' dataname ': ' Data '            , ' bind ': [],//{text: ' Text ', Val: ' id '}; ' Isnullstr ': ' None '} this.options = $.extend ({}, This.defaults, opt)}//method for defining Selectsimulation Select  Simulation.prototype = {temp:function (str, obj) {return str.replace (/\{\$\w+\}/gi, function (matchs)                {var returns = Obj[matchs.replace (/\{\$/g, ""). Replace (/\}/g, "")];            Return (returns + "") = = "undefined"? "": Returns;        }); }, Info: {tempstr: ' <div class= ' select-s-val ' ><a class= ' text-box ' ></a><input type = "text" data-val= "" readonly= "readonly"/><a><i></i></a></div><div class= "          Select-s-a "></div>",  Tempstra: ' <a class= ' a-item ' data-val= ' {$val} ' data-text= ' {$text} ' >{$text}</a> ', returndata: []            },//main init:function () {var _this = this; this. $element. html (this.            INFO.TEMPSTR); if (_this.options.bind[0]) {_this. Info.tempstra = ' <a class= ' A-item "data-val=" {$ ' + _this.options.bind[0].val + '} "data-text=" {$ ' + _this.options.bind            [0].text + '} ' >{$ ' + _this.options.bind[0].text + '}</a> ';                } if (this.options.def[0] = = ' undefined ' && this.options.def.length = = = This.options.len) { for (var i = 0, j = this.options.len; I < J; i++) {This.options.def.push ({text: '--select--', Val                : '-1 '});                }} else {//alert (' cannot execute correctly ');            return false; }//Initializes the first container of this. Finddata (This.options.ajax[0].url, This.options.ajax[0].data, FunctioN (data) {//console.log (json.stringify (data)); var htmlstr = this.                Binddata (Data[this.options.dataname]);                var $element 0 = this. $element. EQ (0);                $element 0.attr ("Data-type", ' 0 ');                $element 0.find ("Div.select-s-a"). HTML (HTMLSTR);                var $element _input = $element 0.find ("input");                var $alist = $element 0.find ("A.a-item");                    $alist. Click (function () {$element _input.val ($ (this). attr (' Data-text '));                    $element _input.attr (' Data-val ', $ (this). attr (' Data-val ')); _this.                    Changedata.call (_this, (parseint ($element 0.attr (' data-type ') + 1), $ (this). attr (' Data-val '));                $ (this). Parent (). Hide ();            });            }); This.            Bindfocus ();        return this.Info.returndata;            },//Linkage changedata:function (item, val) {var _this = this; if (item >= this.optionS.len) {return;            } this.options.ajax[item].data[this.options.ajax[item].data[' def '] = val; This. Finddata (This.options.ajax[item].url, This.options.ajax[item].data, function (data) {//console.log (json.st                Ringify (data)); var htmlstr = this.                Binddata (Data[this.options.dataname]);                var $element 0 = this. $element. EQ (item);                $element 0.attr ("Data-type", item);                $element 0.find ("Div.select-s-a"). HTML (HTMLSTR);                var $element _input = $element 0.find ("input");                var $alist = $element 0.find ("A.a-item");                    $alist. Click (function () {$element _input.val ($ (this). attr (' Data-text '));                    $element _input.attr (' Data-val ', $ (this). attr (' Data-val ')); _this.                    Changedata.call (_this, (parseint ($element 0.attr (' data-type ') + 1), $ (this). attr (' Data-val '));          $ (this). Parent (). Hide ();      });                    if ($alist. length > 0) {$element _input.val ($alist. EQ (0). attr (' Data-text '));                    $element _input.attr (' Data-val ', $alist. EQ (0). attr (' Data-val ')); _this.                Changedata.call (_this, (parseint ($element 0.attr (' data-type ') + 1), $alist. EQ (0). attr (' Data-val ')); } else {$element _input.val (_this.options.isnullstr[item]? _this.options.isnullstr[item                    ]: _THIS.OPTIONS.ISNULLSTR);                $element _input.attr (' data-val ', ');        }            });            },//Data processing binddata:function (data) {if (data = = null) return ';            var _this = this;            var _strall = '; for (var i = 0, j = data.length; I < J; i++) {_strall + = _this.temp (_this.            Info.tempstra, Data[i]);        } return _strall; },//Data finddata:function via Ajax (URL, data, fn) {var _this = this;                $.ajax ({url:url, type: "Get", Data:data, DataType: "JSON",                Cache:false,//Disallow cache success:function (obj) {fn.call (_this, obj);        }            });            },//Analog system focus event bindfocus:function () {var _this = this;            this. $element. attr (' TabIndex ', ' 1 ');            var _isoftrue = [];                this. $element. each (function (item), var $element _input = $ (this). Find ("input");                $element _input.val (_this.options.def[item].text);                $element _input.attr (' Data-val ', _this.options.def[item].val);            _isoftrue.push (FALSE);            });                this. $element. Click (Function (event) {Event.preventdefault ();                Event.stoppropagation ();                var _$this = $ (this);      var _$selecta = _$this.find ("div.select-s-a");          var _$selectval = _$this.find ("Div.select-s-val");                    if (_$selecta.css (' display ') = = = ' None ') {_$selectval.removeclass (' Focuss '). addclass (' Focuss ');                _$selecta.show ();                    } else {_$selectval.removeclass (' Focuss ');                _$selecta.hide ();            }}). Hover (function () {_isoftrue[$ (this). Index ()] = true;            }, Function () {_isoftrue[$ (this). Index ()] = false;            });                this. $element. Focusout (function () {//alert ($ (this). Index () + ', ' +_isoftrue[$ (This). Index ()]);                if (_isoftrue[$ (this). Index ()]) return;                var _$this = $ (this);                var _$selecta = _$this.find ("div.select-s-a");                var _$selectval = _$this.find ("Div.select-s-val");                _$selectval.removeclass (' Focuss ');            _$selecta.hide ();         });   this. $element. Find ("Div.select-s-a"). Click (Function (event) {Event.preventdefault ();            Event.stoppropagation ();        });            }, Gettext:function () {var valuedata = [];                this. $element. each (function () {var $element _input = $ (this). Find ("input");            Valuedata.push ($element _input.val ());            });        return valuedata;            }, Getvalues:function () {var valuedata = [];                this. $element. each (function () {var $element _input = $ (this). Find ("input");            Valuedata.push ($element _input.attr (' Data-val '));            });        return valuedata; }}//Use the Selectsimulation object $.fn in the plug-in. Myselect = function (options) {//Create selectsimulation entity var _cselectsimulation = new Selectsimulation (This,        Options); if (typeof options! = ' object ' && options! = undefined) {return _cselectsimUlation[options] ();        } else {_cselectsimulation.init (); }}) (window, $);

//region display $ ("div.select-simulation").  Myselect ({' Len ': 3, ' def ': [{text: '--Please select the province ', Val:-1}, {text: '--Please select City ', Val:-1}, {text: '--Please select district/County ', Val:-1}], ' ajax ': [{url: ' Getarea ', data: {parentid:0}}, {url: ' Getarea ', data: {def: ' ParentID '}}, {u  RL: ' Getarea ', data: {def: ' ParentID '}}], ' bind ': [{text: ' AreaName ', Val: ' Areaid '}, {text: ' AreaName ', Val:    ' Areaid '}, {text: ' AreaName ', Val: ' Areaid '}], ' isnullstr ': [' no Province ', ' No city ', ' no Region/County '}); $ ("#hudezi"). Click (function () {alert ("Div.select-simulation").        Myselect (' getValues ') [0]); Alert ($ ("div.select-simulation").        Myselect (' getValues ') [1]); Alert ($ ("div.select-simulation").        Myselect (' getValues ') [2]); Alert ($ ("div.select-simulation").        Myselect (' GetText ') [0]); Alert ($ ("div.select-simulation").        Myselect (' GetText ') [1]); Alert ($ ("div.select-simulation").    Myselect (' GetText ') [2]); });

CSS

. select-simulation {position:relative; height:25px; width:177px; z-index:1; display:inline-block; *display:block; * Zoom:1; *display:inline; font-size:12px; color:666; Outline:none;vertical-align:middle; }.select-simulation. select-s-val {border:1px solid #d0d2d9; *zoom:1; position:relative; z-index:5; top:0px; left:0 px *zoom:1; }.select-simulation. Select-s-val.focuss {border-color: #0094ff;}. Select-simulation. select-s-val:hover {border-color: #0094ff;}. Select-simulation. select-s-val:after {content: "clear"; height:0px; display:block; overflow:0px; visibility:hidden; Clear:both;  }.select-simulation. select-s-val Text-box {display:inline-block; width:154px; border:none; height:25px; background: #fff; Filter:alpha (opacity=0); opacity:0; Position:absolute; left:0px; top:0px; Z-index:1; }.select-simulation. select-s-val input {width:144px; float:left; outline:none; border:0px; height:25px; line-height : 20px;padding:0px; padding-left:5px;}.select-simulation. Select-s-val a {width:25px; height:25px; float:left; background: #fff; border-left:1px solid #e2 e2e2; Cursor:default; }.select-simulation. Select-s-val a I {display:block; width:0px; height:0px; border:5px dashed transparent; border-to p:5px solid #888; Overflow:hidden; Float:left; margin:10px 0px 0px 8px; _display:inline;        }/*.select-simulation. select-s-val a:hover {background: #888;} . select-simulation. select-s-val a:hover I {border-top-color: #ddd;} */.select-simulation. select-s-a {position:absolute; top:26px; left:0px; width:175px; border:1px solid #e2e2e2; Heig ht:175px; Overflow:auto; Display:none; Z-index:3;background: #fff; }.select-simulation. select-s-a a {display:block; height:20px; text-align:left; text-indent:5px; line-height:20px; o Verflow:hidden; Cursor:default; }.select-simulation. select-s-a a:hover {background: #2793fb; color: #fff;}

　　

　　

Html

<span> area:</span>            <span> province: </span><div class= "Select-simulation" ></div>            <span> City: </span><div class= "select-simulation" ></div>            <span> District/County: </span ><div class= "Select-simulation" ></div>

　　

JS City Three-level linkage Ajax edition