JS級聯怎么使用

本篇內容介紹了“JS級聯怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Java版通用JS級聯

[摘要] 在開發中，經常遇到諸如省、市，大類、小類的級聯select 下拉框。常常，這些類別或地區的內容，又存在數據庫中。這里建議，通過IO，將類別生成js文件，然后在頁面中引入這個js文件，這樣即提高的程序的運用速度，又精簡了的代碼書寫量。
[關鍵字] Java JS

　　在開發中，經常遇到諸如省、市，大類、小類的級聯select 下拉框。常常，這些類別或地區的內容，又存在數據庫中。因為用戶希望，一切都是可控制的。那么，如果涉及到這種級聯的地方，每次都人從庫中讀取，在JSP中要寫很多代碼去讀表。另外，這種級聯在修改數據的時候，應設置的選中項為庫中所載，這也是需要寫一些代碼的。

　　這里本人建議，通過IO，將類別生成js文件，然后在頁面中引入這個js文件，這樣即提高的程序的運用速度，又精簡了的代碼書寫量。

　　一、表結構如下：

　　create table news_class200

　　(

　　id int primary key,

　　parent_id int,

　　class_name varchar(20),

　　orderby int default 0

　　)

　　id 為自動增長

　　parent_id 用來標識父類的id

　　class_name 類別名稱

　　orderby 排序，用來控制select中元素的前后順序

　　二、成生js的java代碼：

　　public static void news_class(String str,String tab) throws IOException

　　{

　　//大類名稱

　　String big="big_class";

　　String small="small_class";

　　String big_array="";

　　String[] small_array;

　　Jdata data = new Jdata(); //dao對象

　　List list = data.jlist("select * from "+tab+" where parent_id=0");

　　FileWriter fw = new FileWriter(str);

　　PrintWriter out = new PrintWriter(fw);

　　List ll = new ArrayList();

　　small_array=new String[list.size()];

　　for(int i=0; i＜list.size(); i++)

　　{

　　//讀取大類信息

　　Map map=(Map)list.get(i);

　　big_array+="'"+map.get("class_name")+"',";

　　ll=data.jlist("select * from "+tab+" where parent_id="+map.get("id"));

　　small_array[i]="";

　　for(int j=0; j＜ll.size(); j++)

　　{

　　Map m =(Map)ll.get(j);

　　small_array[i]+="'"+m.get("class_name")+"',";

　　}

　　small_array[i]=noEnd(small_array[i]);

　　// System.out.println(big_array);

　　}

　　big_array=noEnd(big_array);

　　// out.println("＜script language=javascript＞");

　　out.println("document.writeln('＜select name="+big+" onchange=""+small+"MM(this.selectedIndex)"＞'); ");

　　out.println("document.writeln('＜option value=""＞請選擇＜/option＞'); ");

　　out.println("document.writeln('＜/select＞'); ");

　　out.println("document.writeln('＜select name="+small+"＞'); ");

　　out.println("document.writeln('＜option value=""＞請選擇＜/option＞'); ");

　　out.println("document.writeln('＜/select＞'); ");

　　out.println("var "+big+"Name = ["+big_array+"]; ");

　　out.println(" var "+big+"Value=["+big_array+"]; ");

　　for(int m=0; m＜small_array.length; m++)

　　out.println(" var "+small+(m+1)+" = ["+small_array[m]+"]; ");

　　out.println("function "+big+"() {");

　　out.println(" var e = document.getElementById('"+big+"'); "); //000

　　out.println(" for (var i=0; i＜"+big+"Name.length; i++)");

　　out.println(" e.options.add(new Option("+big+"Name[i], "+big+"Value[i])); ");

　　out.println(" }");

　　out.println(" function "+small+"MM(n){");

　　out.println(" var e = document.getElementById('"+small+"'); ");

　　out.println("e.options.length = 1; ");

　　out.println("if (n == 0) return; ");

　　out.println(" var a = eval('"+small+"'+ n); ");

　　out.println(" for (var i=0; i＜a.length; i++) e.options.add(new Option(a[i], a[i])); ");

　　out.println("}");

　　out.println(big+"(); ");

　　//out.println(" window.attachEvent('onload', "+big+"); ");

　　//out.println(" ＜/script＞");

　　out.flush();

　　out.close();

　　fw.close();

　　}

　　三、生成的js如下：

　　document.writeln('＜select name=big_class onchange="small_classMM(this.selectedIndex)"＞');

　　document.writeln('＜option value=""＞請選擇＜/option＞');

　　document.writeln('＜/select＞');

　　document.writeln('＜select name=small_class＞');

　　document.writeln('＜option value=""＞請選擇＜/option＞');

　　document.writeln('＜/select＞');

　　var big_className = ['縣域動態','省域見聞','國外新聞'];

　　var big_classValue=['縣域動態','省域見聞','國外新聞'];

　　var small_class1 = ['A類',''B類,'C類'];

　　var small_class2 = ['無小類'];

　　var small_class3 = ['無'];

　　function big_class() {

　　var e = document.getElementById('big_class');

　　for (var i=0; i＜big_className.length; i++)

　　e.options.add(new Option(big_className[i], big_classValue[i]));

　　}

　　function small_classMM(n){

　　var e = document.getElementById('small_class');

　　e.options.length = 1;

　　if (n == 0) return;

　　var a = eval('small_class'+ n);

　　for (var i=0; i＜a.length; i++) e.options.add(new Option(a[i], a[i]));

　　}

　　big_class(); 

“JS級聯怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！