|
|
Posted on 2011-04-24 14:36 哈希 閱讀(137) 評論(0) 編輯 收藏 所屬分類: xml 文件
開始：
首先來研究一下級聯(lián)吧：
知道級聯(lián)的原理嗎？很簡單，根據(jù)前一個選它有關(guān)系的下一個哦，呵呵！
那做起來代碼怎么寫呢：肯定一點(diǎn)，必須要用到j(luò)s技術(shù)了，你要有事件的么，你看好了，級聯(lián)要這樣寫啊： 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學(xué)期</option>
<option value="2">2學(xué)期</option>
</select>
<select name="select2">
<option>請選擇</option>
</select>
</form>
具體解釋：
其實(shí)他這里是個js的二維數(shù)組，arr[0]=["a","b","c","d"];
arr[1]=["c++","oracle","sql","js"];數(shù)組下標(biāo)為0的有"a","b","c","d";
數(shù)組下標(biāo)為1的有"c++","oracle","sql","js"，
var i=document.form1.selterm.selectedIndex-1;這句話其實(shí)跟op=new Option(arr[i][j],arr[i][j]);有關(guān)，舉個例子，選擇1學(xué)期的時(shí)候，
document.form1.selterm.selectedIndex為1，-1之后為0，然后找到arr[0]，也就是["a","b","c","d"]），然后new出一個Option(arr[0][j],arr[0][j]);
（一個option包含顯示的內(nèi)容和value值。)在清空之后，select下面是空的，必須加一個請選擇的option填充，其實(shí)把下標(biāo)修改一下，arr[1]=["a","b","c","d"];
arr[2]=["c++","oracle","sql","js"];這時(shí)候var i=document.form1.selterm.selectedIndex就可以了，不需要減1了，不知道你是否明白意思了
準(zhǔn)備工作完了，繼續(xù)ajax來完成級聯(lián)啊：
先看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("楊浦區(qū)");
list4.add("黃浦區(qū)");
list4.add("徐匯區(qū)");
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>價(jià)格</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;
}
}
}
呵呵，也很簡單吧！學(xué)習(xí)java本來就不是難事么，只要你肯動腦子！
|