在做级联查询的时候用到的, 两个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; 才正确