需要与php的树形缓存类,结合使用,采用了同样的数据模式 jQuery.noConflict(); function sanshi_linkage(show_div_id,post_field,json_str,select_index) { this.show_div_id = show_div_id; this.post_field = post_field; this.json_str = json_str; this.max_depth = 0; this.select_index = select_index; this.compart_str=","; } sanshi_linkage.prototype.get_json_suffix = function() { var temp = new Array(); var length = 0; for(key in this.json_str) { temp[length] = key; length++; } return temp; } sanshi_linkage.prototype.get_max_depth = function(json_suffix) { var max_depth =0; for(var i=0;i<json_suffix.length;i++) { depth = this.json_str[json_suffix[i]]['depth']; if(depth > max_depth) max_depth = depth; } return max_depth; } sanshi_linkage.prototype.make_html_option = function(show_div_id,select_id,option_txt,option_value) { jQuery("#"+show_div_id+" > select[sel_len="+select_id+"]").get(0).options.add(new Option(option_txt,option_value)); } sanshi_linkage.prototype.make_all_options = function(show_div_id,sel_len,root_str) { if(typeof(this.json_str[root_str])!="undefined") { var option_arr = root_str=='root'? this.json_str[root_str].split(','):this.json_str[root_str]['cid'].split(','); for(var i=0;i<option_arr.length;i++) { if(option_arr[i]!="") this.make_html_option(show_div_id,sel_len,this.json_str[option_arr[i]]['title'],this.json_str[option_arr[i]]['id']); } } } sanshi_linkage.prototype.clear_html_option = function(show_div_id,select_id) { jQuery("#"+show_div_id+" > select[sel_len="+select_id+"]").get(0).options.length = 0; } sanshi_linkage.prototype.set_html_hidden_value = function(show_div_id,hidden_value) { //alert("#"+show_div_id+'> #'+this.post_field); jQuery("#"+show_div_id+'> #'+this.post_field).val(hidden_value); } sanshi_linkage.prototype.make_html_hidden = function() { var input = jQuery(document.createElement("INPUT")); input.attr('type',"text");//hidden input.attr('name',this.post_field); input.attr('id',this.post_field); input_value =new Array(); for(var i=0;i<this.max_depth;i++) { input_value[i] = jQuery("#"+this.show_div_id+" > select[sel_len="+i+"]").val(); } input.val(input_value.join(this.compart_str)); jQuery('#'+this.show_div_id).append(input); } sanshi_linkage.prototype.set_selected=function(show_div_id,sel_len,select_index) { jQuery("#"+show_div_id+" > select[sel_len="+sel_len+"]").children().each(function(){ if(jQuery(this).val()==select_index) jQuery(this).attr('selected',true); }); } sanshi_linkage.prototype.get_pid_arr = function(cid) { var temp = new Array(); pid_str =cid; if(this.json_str[cid]['pstr']!="") pid_str +=','+this.json_str[cid]['pstr']; return pid_str; } sanshi_linkage.prototype.make_html_select = function(show_div_id,sel_len,json_str,max_depth,post_field,compart_str) { var select = jQuery(document.createElement("SELECT")); cur_sel_len = jQuery(this).attr('sel_len'); sel_val = jQuery(this).val(); select.attr('sel_len',sel_len); select.change(function(e) { sanshi_linkage.prototype.select_onchange(show_div_id,jQuery(this).attr('sel_len'),jQuery(this).val(),json_str,max_depth,post_field,compart_str); }); return select; } sanshi_linkage.prototype.select_onchange = function(show_div_id,cur_sel_len,sel_val,json_str,max_depth,post_field,compart_str) { var next_sel_len = parseInt(cur_sel_len)+1; for(var i=next_sel_len;i<max_depth;i++) { this.clear_html_option(show_div_id,i); } var input_value = new Array(); //取得下标的值,赋值给隐藏字段 for(var i=0;i<max_depth;i++) { input_value[i] = jQuery("#"+show_div_id+" > select[sel_len="+i+"]").val(); } jQuery('#'+show_div_id+'>#'+post_field).val(input_value.join(compart_str)); if(next_sel_len >= max_depth) return; //alert(typeof(json_str[sel_val])); var option_str = typeof(json_str[sel_val]) == "undefined" ? "" : json_str[sel_val]['cid']; //alert(json_str["root"]); if(option_str=="") { this.make_html_option(show_div_id,next_sel_len,"无",""); return ""; }else{ this.make_html_option(show_div_id,next_sel_len,"请选择",''); } var option_arr = json_str[sel_val]['cid'].split(','); for(var i=0;i<option_arr.length;i++) { if(json_str[option_arr[i]]) this.make_html_option(show_div_id,next_sel_len,json_str[option_arr[i]]['title'],json_str[option_arr[i]]['id']); } } sanshi_linkage.prototype.init = function() { this.max_depth = this.get_max_depth(this.get_json_suffix()); for(var i=0;i<this.max_depth;i++) { jQuery('#'+this.show_div_id).append(this.make_html_select(this.show_div_id,i,this.json_str,this.max_depth,this.post_field,this.compart_str)); show_txt = i==0 ? "请选择" : "无"; this.make_html_option(this.show_div_id,i,show_txt,""); } //建立一级菜单 this.make_all_options(this.show_div_id,0,'root'); this.make_html_hidden(); //如果设置了默认选项 if(this.select_index!="") { var temp = this.select_index.split(this.compart_str); //取得夫级id串 var select_pid_str = temp.length>1 ? temp.reverse().join(',') : this.get_pid_arr(this.select_index); //alert(select_pid_str); var select_pid_arr = select_pid_str.split(','); //this.set_selected(0,select_pid_arr[select_pid_arr.length-1]); for(var i=select_pid_arr.length-1 ; i>=1 ; i-- ) { //建立下一级的option选项 this.make_all_options(this.show_div_id,select_pid_arr.length-i,select_pid_arr[i]); } var temp_value = new Array(); for(var i=0;i<select_pid_arr.length;i++) { //alert(i+'-'+select_pid_arr[select_pid_arr.length-1-i]); this.set_selected(this.show_div_id,i,select_pid_arr[select_pid_arr.length-1-i]); temp_value[i] = select_pid_arr[select_pid_arr.length-1-i]; } this.set_html_hidden_value(this.show_div_id,temp_value.join(this.compart_str)); } } 代码的使用 <html> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript" src="sanshi_linkage.js" mce_src="sanshi_linkage.js"></mce:script> <mce:script type="text/javascript"><!-- var json_str = {"root":"1,2,3,4,6","1":{"id":"1","title":"/u9996/u9875 /u65b0/u95fb","pid":"0","cid":"5,7","depth":"1","pstr":""},"2":{"id":"2","title":"/u9996/u9875/u5a31/u4e50","pid":"0","cid":"","depth":"1","pstr":""},"3":{"id":"3","title":"test","pid":"0","cid":"","depth":"1","pstr":""},"4":{"id":"4","title":"test2","pid":"0","cid":"","depth":"1","pstr":""},"5":{"id":"5","title":"/u9996/u9875 /u65b0/u95fb1","pid":"1","cid":"8","depth":"2","pstr":"1"},"6":{"id":"6","title":"werwwwwwwwww","pid":"0","cid":"","depth":"1","pstr":""},"7":{"id":"7","title":"index test","pid":"1","cid":"","depth":"2","pstr":"1"},"8":{"id":"8","title":"etertertertrter","pid":"5","cid":"","depth":"3","pstr":"5,1"}}; var json_str2={"root":"5,3","7":{"id":"7","title":"/u6b66/u6c49114","pid":"5","cid":"","depth":"2","pstr":"5"},"6":{"id":"6","title":"/u5510/u5c71114","pid":"5","cid":"","depth":"2","pstr":"5"},"5":{"id":"5","title":"/u5730/u65b9114","pid":"0","cid":"7,6","depth":"1","pstr":""},"4":{"id":"4","title":"/u6765/u6e902","pid":"3","cid":"","depth":"2","pstr":"3"},"3":{"id":"3","title":"/u6765/u6e901","pid":"0","cid":"4","depth":"1","pstr":""}}; jQuery(document).ready(function(){ var sanshi = new sanshi_linkage('show_select123','h_1',json_str,''); sanshi.init(); var sanshi1 = new sanshi_linkage('show_select456','h_2',json_str2,''); sanshi1.init(); }); // --></mce:script> <body> <div id='show_select123'>aaaaa</div> <div id='show_select456'>456</div> <div id='show_select789'><div id="sdf">789</div></div> </body> </html>