new Option的一个例子

最新推荐文章于 2024-02-02 10:25:06 发布

原创最新推荐文章于 2024-02-02 10:25:06 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用AJAX和新选项功能实现级联查询，通过动态创建选择项来展示不同分类下的数据，包括后台数据处理流程及前端交互实现。

在做级联查询的时候用到的，两个select和一个查询button，点击第一个select列出所有部门（比如采购部、新闻部），点击某一分类之后（比如采购部），第二个select动态创建该分类下的数据项（比如采购部员工信息表、采购项目表等）。

当第一个select被选择后要到后台查询第二个select要显示的数据，再传给前台显示。这里就用到了ajax和new Option。

首先后台：

		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		writer.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		writer.write("<info>");
		writer.write("<id>");
		writer.write(xxx.getXXX());	//查询得到的id属性值
		writer.write("</id>");
		writer.write("<name>");
		writer.write(xxx.getXXX());	//查询得到的name属性值
		writer.write("</name>");
		writer.write("</info>");
		writer.flush();

前台：

var doc = xmlHttp.responseXML.documentElement;	//xmlHttp对象的初始化就不说了
var gts = doc.getElementsByTagName("info");
							
for(var x=0;x<gts.length;x++) {
								
	var id = gts[x].childNodes[0].firstChild.nodeValue;
	var name = gts[x].childNodes[1].firstChild.nodeValue;
								
	var opt = new Option(name,id);	//<option value="id的值">name的值</option>
								
	if(browser.isFF) select2.options.add(opt);
	else select2.add(opt);
								
							}

最后点击查询Button时我没有用局部刷新的办法来显示列表数据，而是用了form提交。于是就要传递select2被选择的值到后台，并在页面返回时传回来作为被选择的option的判断，再进行设置。

但是我上网搜几种办法都没完成option被选择的效果

（比如selector.options[x].selected=true，selector.selectedIndex=x）
最后用了opt.selected = true; 才正确