xml文档如下:
想实现用jquery形成联动那种下拉框
但是总是报错：
附上html代码和js代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script type="text/javascript" src="testxml.js"></script>
</head>
<body>
<div id="wrapper">
<h1>jquery playground</h1>
<ul id="nav">
<li><a class="current" href="index.html">演示jquery中的ajax操作</a> </li>
<li><a href="#">XML方式请求数据</a></li>
</ul>
<div id="content">
<form id="locationForm" name="locationForm" method="post" action="">
国家：
<select name="country" id="country" onchange="getItems(*country*,*province*);">
<option value="0" selected="selected">请选择</option>
</select>
省份：
<select name="province" id="province" onchange="getItems(*province*,*city*);">
<option value="0" selected="selected">请选择</option>
</select>
城市：
<select name="city" id="city" onchange="selectItem(*city*);">
<option value="0" selected="selected">请选择</option>
</select>
</form>
</div>
</div>
</body>
</html>
textxml.js文件:
$(document).ready(function(){
oxml = LoadXML("location.xml");
getCountries();
$("#country").change(function(){
getItems(*country*,*province*);
});
$("#province").change(function(){
getItems(*province*,*city*);
});
$("#city").change(function(){
selectItem(*city*);
});
});
function LoadXML(apath)
{
var xmlDoc = null;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else
{
if(document.implementation && document.implementation.createDocument)
{
try
{
xmlDoc = document.implementation.createDocument("","",null);
}catch (e)
{
alert("XMLDOC创建失败："+ e.message);
}
}
else
{
alert("你的浏览器不能处理这个脚本");
}
}
try
{
xmlDoc.async = false;
xmlDoc.load(apath);
}catch (e)
{
alert("xml加载失败："+ e.toString());
}
return xmlDoc;
}
function getCountries()
{
if($(oxml).find("location > country").size() > 0 )
{
var countryHtml;
$(oxml).find("country").each(function(){
countryHtml += *<option value="* + $(this).attr("id") + *">* + $(this).attr("name") + *</option>*;
});
$(countryHtml).appendTo("#country");
}
}
function getItems(itemName,childItem)
{
selectItem(itemName);
var itemHtml = *<option value="0" select="selected">请选择</option>*;
if($(currentItem).find(childItem).size() > 0 )
{
$(currentItem).find(childItem).each(function(){
itemHtml += *<option value="*+$(this).attr("id")+*">*+$(this).attr("name")+*</option>*;
});
$("#"+childItem).html(itemHtml);
}
}
function selectItem(itemName)
{
ocurrent = $("select[@name="+itemName+"] option[@selected]");
current_id = ocurrent.val();
currentItem = $(oxml).find(itemName+"[id="+current_id+"]");
currentItem_name = currentItem.attr("name");
currentItem_path = currentItem.attr("path");
$("#current"+itemName+"path").val(currentItem_path);
}
想实现用jquery形成联动那种下拉框
但是总是报错：
附上html代码和js代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script type="text/javascript" src="testxml.js"></script>
</head>
<body>
<div id="wrapper">
<h1>jquery playground</h1>
<ul id="nav">
<li><a class="current" href="index.html">演示jquery中的ajax操作</a> </li>
<li><a href="#">XML方式请求数据</a></li>
</ul>
<div id="content">
<form id="locationForm" name="locationForm" method="post" action="">
国家：
<select name="country" id="country" onchange="getItems(*country*,*province*);">
<option value="0" selected="selected">请选择</option>
</select>
省份：
<select name="province" id="province" onchange="getItems(*province*,*city*);">
<option value="0" selected="selected">请选择</option>
</select>
城市：
<select name="city" id="city" onchange="selectItem(*city*);">
<option value="0" selected="selected">请选择</option>
</select>
</form>
</div>
</div>
</body>
</html>
textxml.js文件:
$(document).ready(function(){
oxml = LoadXML("location.xml");
getCountries();
$("#country").change(function(){
getItems(*country*,*province*);
});
$("#province").change(function(){
getItems(*province*,*city*);
});
$("#city").change(function(){
selectItem(*city*);
});
});
function LoadXML(apath)
{
var xmlDoc = null;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else
{
if(document.implementation && document.implementation.createDocument)
{
try
{
xmlDoc = document.implementation.createDocument("","",null);
}catch (e)
{
alert("XMLDOC创建失败："+ e.message);
}
}
else
{
alert("你的浏览器不能处理这个脚本");
}
}
try
{
xmlDoc.async = false;
xmlDoc.load(apath);
}catch (e)
{
alert("xml加载失败："+ e.toString());
}
return xmlDoc;
}
function getCountries()
{
if($(oxml).find("location > country").size() > 0 )
{
var countryHtml;
$(oxml).find("country").each(function(){
countryHtml += *<option value="* + $(this).attr("id") + *">* + $(this).attr("name") + *</option>*;
});
$(countryHtml).appendTo("#country");
}
}
function getItems(itemName,childItem)
{
selectItem(itemName);
var itemHtml = *<option value="0" select="selected">请选择</option>*;
if($(currentItem).find(childItem).size() > 0 )
{
$(currentItem).find(childItem).each(function(){
itemHtml += *<option value="*+$(this).attr("id")+*">*+$(this).attr("name")+*</option>*;
});
$("#"+childItem).html(itemHtml);
}
}
function selectItem(itemName)
{
ocurrent = $("select[@name="+itemName+"] option[@selected]");
current_id = ocurrent.val();
currentItem = $(oxml).find(itemName+"[id="+current_id+"]");
currentItem_name = currentItem.attr("name");
currentItem_path = currentItem.attr("path");
$("#current"+itemName+"path").val(currentItem_path);
}
