無限級分類js解析聯動

 <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.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"}}; jQuery.noConflict(); sanshi_linkage=function(show_div_id,post_field) { //設置json串 var json_str =""; //設置最深的目錄深度 var max_depth = 0; //設置json字符串 this.set_json = function(json_strs){ json_str = json_strs;init(); } //取得json下標 var get_json_suffix = function() { var temp = Array(); var length = 0; for(key in json_str) { temp[length] = key; length++; } return temp; } //取得深度 var get_max_depth = function(json_suffix) { for(var i=0;i<json_suffix.length;i++) { depth = json_str[json_suffix[i]]['depth']; if(depth > max_depth) max_depth = depth; } return max_depth; } //根據要求建立下拉表單 var make_html_select = function(sel_len) { var select = jQuery(document.createElement("SELECT")); select.attr('sel_len',sel_len); select.change(function(e){ select_onchange(jQuery(this).attr('sel_len'),jQuery(this).val()); }); return select; } //下拉菜單的onchange事件 var select_onchange = function(cur_sel_len,sel_val) { var next_sel_len = parseInt(cur_sel_len)+1; for(var i=next_sel_len;i<max_depth;i++) { clear_html_option(i); } //取得下標的值，賦值給隱藏字段 for(var i=0;i<max_depth;i++) { input_value[i] = jQuery("select[sel_len="+i+"]").val(); } jQuery('#'+post_field).val(input_value.join("_")); if(next_sel_len >= max_depth) return; var option_str = json_str[sel_val]['cid']; if(option_str=="") { make_html_option(next_sel_len,"無",""); return ""; }else{ make_html_option(next_sel_len,"請選擇",''); } var option_arr = json_str[sel_val]['cid'].split(','); for(var i=0;i<option_arr.length;i++) { make_html_option(next_sel_len,json_str[option_arr[i]]['title'],json_str[option_arr[i]]['id']); } } var make_html_hidden = function(){ var input = jQuery(document.createElement("INPUT")); input.attr('type',"text");//hidden input.attr('name',post_field); input.attr('id',post_field); input_value =new Array(); for(var i=0;i<max_depth;i++) { input_value[i] = jQuery("select[sel_len="+i+"]").val(); } input.val(input_value.join("_")); jQuery('#'+show_div_id).append(input); } //建立option選項 var make_html_option = function(select_id,option_txt,option_value){jQuery("select[sel_len="+select_id+"]") .get(0).options.add(new Option(option_txt,option_value));} //清空option數據 var clear_html_option = function(select_id){jQuery("select[sel_len="+select_id+"]").get(0).options.length = 0;} var init = function() { get_max_depth(get_json_suffix()); for(var i=0;i<max_depth;i++) { jQuery('#'+show_div_id).append(make_html_select(i)); show_txt = i==0 ? "請選擇" : "無"; make_html_option(i,show_txt,""); } option_arr = json_str['root'].split(','); for(var i=0;i<option_arr.length;i++) { //alert(json_str[option_arr[i]]['title']); make_html_option(0,json_str[option_arr[i]]['title'],json_str[option_arr[i]]['id']); } //添加隱藏字段 make_html_hidden(); } } jQuery(document).ready(function(){ sanshi = new sanshi_linkage('show_select123','sel_h'); sanshi.set_json(json_str); }); // --></mce:script>參數爲，追加的div id 另外一個參數是 post字段的名稱