Jquery+json general three-level linkage Drop-down list effect code

Jquery+json general three-level linkage Drop-down list effect code

With the jquery implementation, the original code only supports IE, here I changed, my code has three versions of the implementation
The first is to read the XML build, support Ie/firefox,chrome not support, interested in can read the XML part of the way to Ajax, so that chrome support is not a problem
The second is to build with JSON data format, which is my second attempt to improve
The third one is actually the same as the second one, just separate the data into the JS file, my code has an ASP file, is to call the database tutorial to generate JSON provinces and cities data, if the page directly call ASP file, the speed will be very slow, generate JS file directly after the call will be much faster, And this part of the data is generally not altered.

Update records:

++2010-04-19 12:11:24
Add a plug-in example, in fact, not counting plug-ins, is a function, why not write Plug-ins, just based on the flexibility of consideration,
So that select can be placed anywhere on the page, not limited to Div, table, TD and other page elements
parameter is similar to the following, S1/S2/S3 configures the id,v1/v2/v3 of a select as the default value, or if you do not want to set it to null, or simply does not set

The parameters are configured as follows, configuring the three ID and default values on a select line with no default values filled in as null
Copy code code as follows:
var defaults = {
S1: ' Select1 ',
S2: ' Select2 ',
S3: ' Select3 ',
V1:null,
V2:null,
V3:null
};

This is the fourth example, the directory of PHP tutorial files are server-side data generation demo, used as a reference

The data format definition resembles the following:

Copy code code as follows:
var threeselectdata={
"Province": {val: "", items:{"city": {val: "", items:{"county": ""}}},
"Beijing": {val: "items:{",
"Bj-01": {val: "0101", items:{
"bj-01-01": "010101"
}},
"Bj-02": {val: "0102", items:{
"bj-02-01": "010201",
"bj-02-02": "010202"
}}
}},
"Shanxi": {val: ", items:{}},
' Guangzhou ': {val: ', items:{}}
};

code example:

Copy code code as follows:
<script type= "Text/javascript Tutorial" src= ". /jquery-1.3.2.min.js "></script>
<script type= "Text/javascript" src= "Areadata.js" ></script>
<script type= "Text/javascript" >
/*
General Level Three linkage description
The parameters are configured as follows, configuring the three ID and default values on a select line with no default values filled in as null
var defaults = {
S1: ' Select1 ',
S2: ' Select2 ',
S3: ' Select3 ',
V1:null,
V2:null,
V3:null
};
*/
var defaults = {
S1: ' Select1 ',
S2: ' Select2 ',
S3: ' Select3 ',
v1:120000,
V2:120200,
v3:120224
};
$ (function () {
Threeselect (defaults);
});
function Threeselect (config) {
var $s 1=$ ("#" +CONFIG.S1);
var $s 2=$ ("#" +CONFIG.S2);
var $s 3=$ ("#" +CONFIG.S3);
var v1=config.v1?config.v1:null;
var v2=config.v2?config.v2:null;
var v3=config.v3?config.v3:null;
$.each (Threeselectdata,function (k,v) {
Appendoptionto ($s 1,k,v.val,v1);
});
$s 1.change (function () {
$s 2.html ("");
$s 3.html ("");
if (this.selectedindex==-1) return;
var s1_curr_val = This.options[this.selectedindex].value;
$.each (Threeselectdata,function (k,v) {
if (s1_curr_val==v.val) {
if (V.items) {
$.each (V.items,function (k,v) {
Appendoptionto ($s 2,k,v.val,v2);
});
}
}
});
if ($s 2[0].options.length==0) {Appendoptionto ($s 2, "...", "", V2);}
$s 2.change ();
). Change ();
$s 2.change (function () {
$s 3.html ("");
var s1_curr_val = $s 1[0].options[$s 1[0].selectedindex].value;
if (this.selectedindex==-1) return;
var s2_curr_val = This.options[this.selectedindex].value;
$.each (Threeselectdata,function (k,v) {
if (s1_curr_val==v.val) {
if (V.items) {
$.each (V.items,function (k,v) {
if (s2_curr_val==v.val) {
$.each (V.items,function (k,v) {
Appendoptionto ($s 3,k,v,v3);
});
}
});
if ($s 3[0].options.length==0) {Appendoptionto ($s 3, "...", "", V3);}
}
}
});
). Change ();
function Appendoptionto ($o, k,v,d) {
var $opt =$ ("<option>"). Text (k). Val (v);
if (V==d) {$opt. attr ("Selected", "Selected")}
$opt. Appendto ($o);
}
}
</script>
<style type= "text/css Tutorial" media= "screen" >
select{width:80px;}
</style>
<select id= "Select1" name= "Select1" ></select>
<select id= "Select2" name= "Select2" ></select>
<select id= "Select3" name= "Select3" ></select>