资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS级联怎么使用

本篇内容介绍了“JS级联怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联主营绥德网站建设的网络公司,主营网站建设方案,app软件开发公司,绥德h5小程序制作搭建,绥德网站营销推广欢迎绥德等地区企业咨询

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级联怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


本文名称:JS级联怎么使用
文章出自:http://cdkjz.cn/article/ghssoh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220