オリジナル:Jsはxmlファイルを解析して、省市区カスケードメニューを簡単に実現します.
オリジナル:Jsはxmlファイルを解析して、省市区カスケードメニューを簡単に実現します.
先ごろ日本で起きた地震で、中国が食塩を買う熱狂ぶりを見せた.そして、塩還付事件が発生しました.そして80、90後の人たちが参加していません.科学の知識を身につけることの大切さを説明します.合格した大学生として常に冷静な頭を持つべきです.
春はついに来て、すべてそんなにのすばらしさです!今回の学生がみんな自分の理想を実現できることを期待しています.この間は学生の基礎を強化するために、授業に追われていました.ブログを書く時間もありませんでした.今日は少し時間がかかりました.jsがxmlファイルを解析する方法をまとめて、各ブラウザの互換性の問題を徹底的に解決します.
まず、DOM(Document Object Model)でドキュメントへのアクセスと操作を定義する標準的な方法を採用します.ここではHTML DOMとXML DOMを使用しました.
1、XML DOM
XML DOM(XML Dcument Object Model)はXMLドキュメントへのアクセスと操作の標準的な方法を定義しています.DOMはXMLドキュメントをツリー構造として表示します.DOMツリーを通してすべての要素にアクセスすることができます.それらの内容を変更または削除して、新しい要素を作成できます.要素、テキスト、およびそれらの属性は、ノードとして認識されています.
2、HTML DOM
HTML DOM(HTML Dcument Object Model)は、HTMLドキュメントにアクセスして操作する標準的な方法を定義しています.HTML DOMを通じてすべてのHTML要素にアクセスできます.
DOMについてまだ把握していないなら、まずDOMに関する知識を調べてみてください.
3、DOM解析におけるブラウザの違いはすべて現代ブラウザでW 3 C DOM仕様をサポートしています.しかし、ブラウザ間には違いがある重要な違いは次の2つあります.
先ごろ日本で起きた地震で、中国が食塩を買う熱狂ぶりを見せた.そして、塩還付事件が発生しました.そして80、90後の人たちが参加していません.科学の知識を身につけることの大切さを説明します.合格した大学生として常に冷静な頭を持つべきです.
春はついに来て、すべてそんなにのすばらしさです!今回の学生がみんな自分の理想を実現できることを期待しています.この間は学生の基礎を強化するために、授業に追われていました.ブログを書く時間もありませんでした.今日は少し時間がかかりました.jsがxmlファイルを解析する方法をまとめて、各ブラウザの互換性の問題を徹底的に解決します.
まず、DOM(Document Object Model)でドキュメントへのアクセスと操作を定義する標準的な方法を採用します.ここではHTML DOMとXML DOMを使用しました.
1、XML DOM
XML DOM(XML Dcument Object Model)はXMLドキュメントへのアクセスと操作の標準的な方法を定義しています.DOMはXMLドキュメントをツリー構造として表示します.DOMツリーを通してすべての要素にアクセスすることができます.それらの内容を変更または削除して、新しい要素を作成できます.要素、テキスト、およびそれらの属性は、ノードとして認識されています.
2、HTML DOM
HTML DOM(HTML Dcument Object Model)は、HTMLドキュメントにアクセスして操作する標準的な方法を定義しています.HTML DOMを通じてすべてのHTML要素にアクセスできます.
DOMについてまだ把握していないなら、まずDOMに関する知識を調べてみてください.
3、DOM解析におけるブラウザの違いはすべて現代ブラウザでW 3 C DOM仕様をサポートしています.しかし、ブラウザ間には違いがある重要な違いは次の2つあります.
1、 XML
//IE
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//firefox
var xmlDoc = document.implementation.createDocument("","",null);
2、
Firefox， ， ， Internet Explorer 。
: ？
for(var i=0;i<provinces.length;i++){
/* :
* , 。
*/
if(provinces[i].nodeType==1){
}
}
： opera11.01 ：
file://D:/Workspaces/MyEclipse 8.6/20110322/WebRoot/city1.html, bug( opera11 ):
XMLHttpRequest to files is disabled for security reasons.
Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
：1、 opera , :about:cofig
2、 : User Prefs
3、 User Prefs :Allow File XMLHttpRequest
4、 bug;
： http://localhost:8080/20110322/city1.html bug.
, ：
1、 xml ：
<root name=" ">
<province name=" " postcode="100000" >
<city name=" " postcode="100100" >
<area name=" " postcode="100101" />
</city>
</province>
<province name=" " postcode="110000" >
<city name=" " postcode="110100" >
<area name=" " postcode="110101" />
<area name=" " postcode="110102" />
<area name=" " postcode="110103" />
<area name=" " postcode="110104" />
<area name=" " postcode="110105" />
<area name=" " postcode="110106" />
<area name=" " postcode="110107" />
<area name=" " postcode="110108" />
<area name=" " postcode="110109" />
<area name=" " postcode="110111" />
<area name=" " postcode="110112" />
<area name=" " postcode="110113" />
<area name=" " postcode="110114" />
<area name=" " postcode="110115" />
<area name=" " postcode="110116" />
<area name=" " postcode="110117" />
</city>
<city name=" " postcode="110200" >
<area name=" " postcode="110228" />
<area name=" " postcode="110229" />
</city>
</province>
<province name=" " postcode="120000" >
<city name=" " postcode="120100" >
<area name=" " postcode="120101" />
<area name=" " postcode="120102" />
<area name=" " postcode="120103" />
<area name=" " postcode="120104" />
<area name=" " postcode="120105" />
<area name=" " postcode="120106" />
<area name=" " postcode="120107" />
<area name=" " postcode="120108" />
<area name=" " postcode="120109" />
<area name=" " postcode="120110" />
<area name=" " postcode="120111" />
<area name=" " postcode="120112" />
<area name=" " postcode="120113" />
<area name=" " postcode="120114" />
<area name=" " postcode="120115" />
</city>
<city name=" " postcode="120200" >
<area name=" " postcode="120221" />
<area name=" " postcode="120223" />
<area name=" " postcode="120225" />
</city>
</province>
……
</root>
2、 html ：
<body>
<div>
<span>
<select id="sheng" style="width: 100px;"></select>
</span>
<span>
<select id="shi" style="width: 100px;"></select>
</span>
<span>
<select id="xian" style="width: 100px;"></select>
</span>
</div>
</body>
3、 js ：
<script type="text/javascript">
<!--
// xmlDoc
function getXmlDoc(){
var xmlDoc;
try{
//IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert(" ........");
}
}
// ,
xmlDoc.async=false;
// xml
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload = function (){
//
var xmlDoc = getXmlDoc();
// xml
var root = xmlDoc.documentElement;
//
var provinces = root.childNodes;
// dom
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//
for(var i=0;i<provinces.length;i++){
//
if(provinces[i].nodeType ==1 ){
// option
var shengopt = document.createElement("option");
//
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
// dom
sheng.appendChild(shengopt);
}
}
//
sheng.onchange = function(){
// option
var shengs = sheng.options;
// option selectedIndex( )
var num = shengs.selectedIndex;
//
shi.length=0;
xian.length=0;
// value xml postcode
var ppostcode = shengs[num].getAttribute("value");
//
for(var i=0;i<provinces.length;i++){
//
if(provinces[i].nodeType ==1 ){
var postcode = provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
var cities = provinces[i].childNodes;
shi.length=0;
for(var i=0;i<cities.length;i++){
if(cities[i].nodeType ==1){
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function(){
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
//
for(var i=0;i<provinces.length;i++){
if(provinces[i].nodeType==1){
var cities = provinces[i].childNodes;
for(var j=0;j<cities.length;j++){
if(cities[j].nodeType==1){
var postcode = cities[j].getAttribute("postcode");
if(postcode == spostcode){
xian.length=0;
var areas = cities[j].childNodes;
for(var k=0;k<areas.length;k++){
if(areas[k].nodeType == 1){
var xianopt = document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
redarmy_chen , redarmy_chen [email protected]