在開發中，經常遇到諸如省、市，大類、小類的級聯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();