jQuery + struts2 专业类别、专业名称 二级联动列表

本人新手,欢迎大家批评指正!
本文旨在实现一个二级联动的“专业名称”选择的下拉列表菜单,基本思路如下:

1、将“专业类别”、“专业名称”的数据存入数据库,并在“专业名称”表中设置指向“专业类别”表的外键,使两表之间建立关联;

2、使用struts2标签库中的select的select标签,从数据库中把“专业类别”的list查上来,将select标签中的list属性设为该list;

3、再添加一个空的select控件,以备添加“专业名称”数据;

4、为“专业类别”的select控件的onchange事件设置调用的方法,当类别变换时,调用该方法,使用jQuery的getJSON方法,取得该“专业类别”下的“专业名称”数据(JSON)形式,并将其添加至“专业名称”的select控件。

先谈谈第二部struts2的select标签。
这是该标签的官方API:http://struts.apache.org/2.0.6/struts2-core/apidocs/org/apache/struts2/components/Select.html
在网上搜“struts2 select标签”也能搜到很多文章,我就不冗诉了,直接贴代码。

JSP页面代码:
<s:select name="spec_type" list="spec_type_list" listKey="id" listValue="name" 
headerKey="" headerValue="--专业类别--" theme="simple" onchange="showSpecs()"/>
<select name="spec_name">
	<option value="">--专业名称--</option>
</select>

struts2 action代码:
public String setting_input2(){
	user = userManager.findUser(userid);
        spec_type_list = specTypeManager.all();//将专业类别列表传递给JSP页面
        return "setting2";
}


onchange事件的showSpecs()方法:
<SCRIPT type="text/javascript">
function showSpecs(){
	var type_id = $("select[name='spec_type']").val();
	if(type_id){
		$.getJSON("user_getSpecs",{spec_type:type_id},function(json){
			var spec_list = $("select[name='spec_name']");
			spec_list.empty();
			spec_list.append('<option value="">--专业名称--</option>');
			$.each( json, function(index, entry){
				spec_list.append('<option value="' + entry['id'] + '">' + entry['name'] + '</option>');
			}); 
		});
	}
};
</SCRIPT>


$.getJSON方法中请求的url:“user_getSpecs”所指向的action:
public void getSpecs() throws IOException{
		
	HttpServletResponse response = ServletActionContext.getResponse();      
        response.setCharacterEncoding("UTF-8");      
        int type_id = Integer.parseInt(spec_type);
        List<Spec> spec_list = specManager.specs(type_id);
        StringBuffer json = new StringBuffer();
        json.append("[");
        for(Spec spec : spec_list){
        	json.append("{id:\"" + spec.getId() + "\",name:\"" + spec.getName() + "\"},");
        }
        json.deleteCharAt(json.length()-1);
        json.append("]");
        
        response.getWriter().write(json.toString());
}


最后说一下,怎么取得的数据,个人的方法比较蠢,大家围观下就好了。
我是从某招聘网站源码中COPY得到附件中的文本数据,再利用正则表达式匹配,将所需数据存入数据库,其中的正则表达式很不严格,仅限使用于我所COPY的文本。

读取存储“专业类别”数据的工具类:
public class SpecTypeUtil {

	public void save_spec_types() {
		try {
			BufferedReader br = new BufferedReader(new FileReader("D:\\spec_type.txt"));
			String line = "";
			while((line=br.readLine()) != null) {
				parse(line);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	private void parse(String line) {
		Pattern p = Pattern.compile("[\u4e00-\u9fa5]+");
		Matcher m = p.matcher(line);
		SessionFactory factory = new Configuration().configure().buildSessionFactory();
		Transaction tx = null;
		Session session = factory.openSession();
		try {
			while(m.find()) {
				//System.out.println(m.group());
				SpecType type = new SpecType();
				type.setName(m.group());
				session.save(type);
			}
			tx = session.beginTransaction();
			tx.commit();
		}catch (Exception e){
			tx.rollback();
			e.printStackTrace();
		}finally {
			session.close();
		}
	}

	public static void main(String args[]){
		
		SpecTypeUtil util = new SpecTypeUtil();
		util.save_spec_types();
	}
}


读取存储“专业名称”数据的工具类:
public class SpecUtil {

	private int i = 0;

	public void save_spec_types() {

		SessionFactory factory = new Configuration().configure().buildSessionFactory();
		Session session = factory.openSession();
		
		try {
			BufferedReader br = new BufferedReader(new FileReader("D:\\specs.txt"));
			String line = "";
			while((line=br.readLine()) != null) {
				parse(line, session);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally {
			session.close();
		}
	}

	private void parse(String line, Session session) {
		//Pattern p = Pattern.compile(",\"^[\u4e00-\u9fa5]+$\"");
		Pattern p1 = Pattern.compile("arrMajorItemValue\\[\\d{1,2}\\]");
		Pattern p2 = Pattern.compile("[\u4e00-\u9fa5]+");
		Matcher m1 = p1.matcher(line);
		Matcher m2 = null;

		Transaction tx = null;
		
		try {
			while(m1.find()) {
				i++;
				SpecType type = (SpecType) session.createQuery("FROM SpecType s WHERE s.id=?")
												  .setParameter(0, i).uniqueResult();
				//System.out.print(i + " " + m1.group());
				m2 = p2.matcher(line);
				while(m2.find()) {
					//System.out.print(m2.group() + ",");
					Spec spec = new Spec();
					spec.setName(m2.group());
					spec.setType(type);
					session.save(spec);
				}
				//System.out.println();
				/*SpecType type = new SpecType();
				type.setName(m.group());
				session.save(type);*/
			}
			tx = session.beginTransaction();
			tx.commit();
		}catch (Exception e){
			tx.rollback();
			e.printStackTrace();
		}
	}

	public static void main(String args[]){
		
		SpecUtil util = new SpecUtil();
		util.save_spec_types();
	}
}


效果图:
jQuery + struts2 专业类别、专业名称 二级联动列表

你可能感兴趣的:(jquery,json,jsp,正则表达式,招聘)