無限極聯動js完善版

需要與php的樹形緩衝類，結合使用，採用了同樣的資料模式

jQuery.noConflict();</p><p>function sanshi_linkage(show_div_id,post_field,json_str,select_index)<br />{<br />this.show_div_id = show_div_id;<br />this.post_field = post_field;<br />this.json_str = json_str;<br />this.max_depth = 0;<br />this.select_index = select_index;<br />this.compart_str=",";<br />}<br />sanshi_linkage.prototype.get_json_suffix = function()<br />{<br />var temp = new Array();<br />var length = 0;<br />for(key in this.json_str)<br />{<br />temp[length] = key;<br />length++;<br />}<br />return temp;<br />}<br />sanshi_linkage.prototype.get_max_depth = function(json_suffix)<br />{<br />var max_depth =0;<br />for(var i=0;i<json_suffix.length;i++)<br />{<br />depth = this.json_str[json_suffix[i]]['depth'];<br />if(depth > max_depth) max_depth = depth;<br />}<br />return max_depth;<br />}<br />sanshi_linkage.prototype.make_html_option = function(show_div_id,select_id,option_txt,option_value)<br />{<br />jQuery("#"+show_div_id+" > select[sel_len="+select_id+"]").get(0).options.add(new Option(option_txt,option_value));<br />}</p><p>sanshi_linkage.prototype.make_all_options = function(show_div_id,sel_len,root_str)<br />{<br />if(typeof(this.json_str[root_str])!="undefined")<br />{<br />var option_arr = root_str=='root'? this.json_str[root_str].split(','):this.json_str[root_str]['cid'].split(',');<br />for(var i=0;i<option_arr.length;i++)<br />{<br />if(option_arr[i]!="")<br />this.make_html_option(show_div_id,sel_len,this.json_str[option_arr[i]]['title'],this.json_str[option_arr[i]]['id']);<br />}<br />}</p><p>}</p><p>sanshi_linkage.prototype.clear_html_option = function(show_div_id,select_id)<br />{<br />jQuery("#"+show_div_id+" > select[sel_len="+select_id+"]").get(0).options.length = 0;<br />}</p><p>sanshi_linkage.prototype.set_html_hidden_value = function(show_div_id,hidden_value)<br />{<br />//alert("#"+show_div_id+'> #'+this.post_field);<br /> jQuery("#"+show_div_id+'> #'+this.post_field).val(hidden_value);<br />}<br />sanshi_linkage.prototype.make_html_hidden = function()<br />{<br />var input = jQuery(document.createElement("INPUT"));<br />input.attr('type',"text");//hidden<br />input.attr('name',this.post_field);<br />input.attr('id',this.post_field);<br />input_value =new Array();<br />for(var i=0;i<this.max_depth;i++)<br />{<br />input_value[i] = jQuery("#"+this.show_div_id+" > select[sel_len="+i+"]").val();<br />}<br />input.val(input_value.join(this.compart_str));<br />jQuery('#'+this.show_div_id).append(input);<br />}<br />sanshi_linkage.prototype.set_selected=function(show_div_id,sel_len,select_index)<br />{<br />jQuery("#"+show_div_id+" > select[sel_len="+sel_len+"]").children().each(function(){<br />if(jQuery(this).val()==select_index)<br />jQuery(this).attr('selected',true);<br />});<br />}<br />sanshi_linkage.prototype.get_pid_arr = function(cid)<br />{<br />var temp = new Array();<br />pid_str =cid;<br />if(this.json_str[cid]['pstr']!="")<br />pid_str +=','+this.json_str[cid]['pstr'];<br />return pid_str;<br />}</p><p>sanshi_linkage.prototype.make_html_select = function(show_div_id,sel_len,json_str,max_depth,post_field,compart_str)<br />{<br />var select = jQuery(document.createElement("SELECT"));<br />cur_sel_len = jQuery(this).attr('sel_len');<br />sel_val = jQuery(this).val();<br />select.attr('sel_len',sel_len);<br />select.change(function(e)<br />{<br />sanshi_linkage.prototype.select_onchange(show_div_id,jQuery(this).attr('sel_len'),jQuery(this).val(),json_str,max_depth,post_field,compart_str);<br />});<br />return select;<br />}<br />sanshi_linkage.prototype.select_onchange = function(show_div_id,cur_sel_len,sel_val,json_str,max_depth,post_field,compart_str)<br />{<br />var next_sel_len = parseInt(cur_sel_len)+1;<br />for(var i=next_sel_len;i<max_depth;i++)<br />{<br />this.clear_html_option(show_div_id,i);<br />}<br />var input_value = new Array();<br />//取得下標的值，賦值給隱藏欄位<br />for(var i=0;i<max_depth;i++)<br />{<br />input_value[i] = jQuery("#"+show_div_id+" > select[sel_len="+i+"]").val();<br />}<br />jQuery('#'+show_div_id+'>#'+post_field).val(input_value.join(compart_str));</p><p>if(next_sel_len >= max_depth) return;</p><p>//alert(typeof(json_str[sel_val]));<br />var option_str = typeof(json_str[sel_val]) == "undefined" ? "" : json_str[sel_val]['cid'];<br />//alert(json_str["root"]);<br />if(option_str=="")<br />{<br />this.make_html_option(show_div_id,next_sel_len,"無","");<br />return "";<br />}else{<br />this.make_html_option(show_div_id,next_sel_len,"請選擇",'');<br />}<br />var option_arr = json_str[sel_val]['cid'].split(',');</p><p>for(var i=0;i<option_arr.length;i++)<br />{<br />if(json_str[option_arr[i]])<br />this.make_html_option(show_div_id,next_sel_len,json_str[option_arr[i]]['title'],json_str[option_arr[i]]['id']);<br />}<br />}</p><p>sanshi_linkage.prototype.init = function()<br />{<br />this.max_depth = this.get_max_depth(this.get_json_suffix());<br />for(var i=0;i<this.max_depth;i++)<br />{<br />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));<br />show_txt = i==0 ? "請選擇" : "無";<br />this.make_html_option(this.show_div_id,i,show_txt,"");<br />}<br />//建立一級菜單<br />this.make_all_options(this.show_div_id,0,'root');<br />this.make_html_hidden();<br />//如果設定了預設選項<br />if(this.select_index!="")<br />{<br />var temp = this.select_index.split(this.compart_str);<br />//取得夫級id串</p><p>var select_pid_str = temp.length>1 ? temp.reverse().join(',') : this.get_pid_arr(this.select_index);<br />//alert(select_pid_str);<br />var select_pid_arr = select_pid_str.split(',');<br />//this.set_selected(0,select_pid_arr[select_pid_arr.length-1]);</p><p>for(var i=select_pid_arr.length-1 ; i>=1 ; i-- )<br />{<br />//建立下一級的option選項<br />this.make_all_options(this.show_div_id,select_pid_arr.length-i,select_pid_arr[i]);<br />}<br />var temp_value = new Array();<br />for(var i=0;i<select_pid_arr.length;i++)<br />{<br />//alert(i+'-'+select_pid_arr[select_pid_arr.length-1-i]);<br />this.set_selected(this.show_div_id,i,select_pid_arr[select_pid_arr.length-1-i]);<br />temp_value[i] = select_pid_arr[select_pid_arr.length-1-i];<br />}<br />this.set_html_hidden_value(this.show_div_id,temp_value.join(this.compart_str));<br />}</p><p>}

 

代碼的使用

 <html><br /><mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script><br /><mce:script type="text/javascript" src="sanshi_linkage.js" mce_src="sanshi_linkage.js"></mce:script><br /><mce:script type="text/javascript"><!--<br />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"}};</p><p>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":""}};</p><p>jQuery(document).ready(function(){<br />var sanshi = new sanshi_linkage('show_select123','h_1',json_str,'');<br />sanshi.init();<br />var sanshi1 = new sanshi_linkage('show_select456','h_2',json_str2,'');<br />sanshi1.init();<br />});<br />// --></mce:script><br /><body><br /><div id='show_select123'>aaaaa</div><br /><div id='show_select456'>456</div><br /><div id='show_select789'><div id="sdf">789</div></div><br /></body><br /></html>