|
|
Posted on 2011-04-24 14:36 哈希 阅读(127) 评论(0) 编辑 收藏 所属分类: xml 文件
开始：
首先来研究一下级联吧：
知道级联的原理吗？很简单，根据前一个选它有关系的下一个哦，呵呵！
那做起来代码怎么写呢：肯定一点，必须要用到js技术了，你要有事件的么，你看好了，级联要这样写啊： javascript：new Option(text, value)
<script>
function selected(){
var arr=new Array();
arr[0]=["a","b","c","d"];
arr[1]=["c++","oracle","sql","js"];
var i=document.form1.selterm.selectedIndex-1;//这里selectedIndex是什么意思为什么还有减去1呢？
document.form1.select2.length=0;//清空
document.form1.select2.options.add(new Option("请选择"));//不是很懂
var op;
for(var j in arr[i]){
op=new Option(arr[i][j],arr[i][j]);//?
document.form1.select2.options.add(op);//?
}
}
</script>
<form name="form1" method="post">
<select name="selterm" id="selterm" onchange="selected()">
<option>请选择</option>
<option value="1">1学期</option>
<option value="2">2学期</option>
</select>
<select name="select2">
<option>请选择</option>
</select>
</form>
具体解释：
其实他这里是个js的二维数组，arr[0]=["a","b","c","d"];
arr[1]=["c++","oracle","sql","js"];数组下标为0的有"a","b","c","d";
数组下标为1的有"c++","oracle","sql","js"，
var i=document.form1.selterm.selectedIndex-1;这句话其实跟op=new Option(arr[i][j],arr[i][j]);有关，举个例子，选择1学期的时候，
document.form1.selterm.selectedIndex为1，-1之后为0，然后找到arr[0]，也就是["a","b","c","d"]），然后new出一个Option(arr[0][j],arr[0][j]);
（一个option包含显示的内容和value值。)在清空之后，select下面是空的，必须加一个请选择的option填充，其实把下标修改一下，arr[1]=["a","b","c","d"];
arr[2]=["c++","oracle","sql","js"];这时候var i=document.form1.selterm.selectedIndex就可以了，不需要减1了，不知道你是否明白意思了
准备工作完了，继续ajax来完成级联啊：
先看java代码：
public class OptionServlet extends HttpServlet {
private Map<String,List<String>>
options=new TreeMap<String,List<String>>();
public void init(){
List<String> list1=new ArrayList<String>();
list1.add("请选择");
options.put("0", list1);
List<String> list2
=new ArrayList<String>();
list2.add("宁波");
list2.add("杭州");
list2.add("嘉兴");
options.put("1", list2);
List<String> list3=new ArrayList<String>();
list3.add("苏州");
list3.add("南京");
list3.add("无锡");
options.put("2", list3);
List<String> list4=new ArrayList<String>();
list4.add("杨浦区");
list4.add("黄浦区");
list4.add("徐汇区");
options.put("3", list4);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String province
=request.getParameter("province");
List<String> cities
=options.get(province);
request.setAttribute(
"cities", cities);
RequestDispatcher rd
=request.getRequestDispatcher(
"result.jsp");
rd.forward(request, response);
}
}
js代码：
  js代码
function selectCity(){
var province
=document.getElementById("province");
var options=province.options;
var value="";
for(var i=0;i<options.length;i++){
if(options[i].selected){
value=options[i].value;
}
}
var parameter="province="+value;
sendAsynchronRequest(
"selectCity",parameter,selectCityCallBack);
}
function selectCityCallBack(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//document对象
var citiesDoc=xmlHttp.responseXML;
var cities
=citiesDoc.getElementsByTagName("city");
clearSelect();
for(var i=0;i<cities.length;i++){
var city=cities[i];
var name="";
var value="";
var childNodes=city.childNodes;
for(var j=0;j<childNodes.length;j++){
var childNode=childNodes[j];
if(childNode.nodeType==1){
if(childNode.tagName=="name"){
name=childNode.firstChild.nodeValue;
}
if(childNode.tagName=="value"){
value=childNode.firstChild.nodeValue;
}
}
}
var citySelect
=document.getElementById("city");
var option=new Option(name,value);
citySelect.options.add(option);
}
}
}
}
function clearSelect(){
var city =
document.getElementById("city");
while(city.hasChildNodes()){
city.removeChild(city.childNodes[0]);
}
}
接下来，我们研究一下xml解析吧：
book.xml
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book id="001">
<name>精通Servlet</name>
<price>30.0</price>
</book>
<book id="002">
<name>深入浅出Hibernate</name>
<price>40.0</price>
</book>
<book id="003">
<name>Thinking In Java</name>
<price>50.0</price>
</book>
<book id="004">
<name>EJB</name>
<price>50.0</price>
</book>
</books>
function loadXml(){
var booksDiv=document.getElementById("booksDiv");
booksDiv="正在装载xml,请等待 ..";
sendAsynchronRequest(
"books.xml",null,loadXmlCallBack);
}
function loadXmlCallBack(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var result=xmlHttp.responseXML;
var books
=result.getElementsByTagName("book");
var booksHtml="<table border=1 width=30% >"
+"<tr><td>编号</td><td>名称</td>"
+"<td>价格</td></tr>";
for(var i=0;i<books.length;i++){
var book=books[i];
var id=book.getAttribute("id");
booksHtml=booksHtml+"<tr><td>"+id+"</td>";
var childNodes=book.childNodes;
for(var j=0;j<childNodes.length;j++){
var childNode=childNodes[j];
if(childNode.nodeType==1){
if(childNode.tagName=="name"){
var value=childNode.firstChild.nodeValue;
booksHtml=booksHtml+"<td>"+value+"</td>";
}
if(childNode.tagName=="price"){
var value=childNode.firstChild.nodeValue;
booksHtml=booksHtml+"<td>"+value+"</td>";
}
}
}
booksHtml=booksHtml+"</tr>";
}
booksHtml=booksHtml+"</table>";
var booksDiv
=document.getElementById("booksDiv");
booksDiv.innerHTML=booksHtml;
}
}
}
呵呵，也很简单吧！学习java本来就不是难事么，只要你肯动脑子！
|