집 >백엔드 개발 >XML/RSS 튜토리얼 >연결된 드롭다운 상자 코드 예제를 생성하기 위해 XML을 호출하는 Javascript에 대한 자세한 설명
연결된 드롭다운 상자 코드 예제를 생성하기 위해 XML을 호출하는 Javascript에 대한 자세한 설명
- 黄舟원래의
- 2017-03-07 16:29:291347검색
기존 HTML 페이지에서 드롭다운 상자를 연결하는 데는 두 가지 방법이 사용됩니다.
1) 드롭다운 상자의 내용을 HTML의 JavaScript로 직접 하드코딩하고 Javascript 함수를 호출하여 드롭에 씁니다. - 루프의 다운 상자. 이 방법은 드롭다운 상자의 내용이 자주 변경되는 상황에는 적합하지 않습니다. 데이터 소스와 JavaScript 프로그램이 같은 페이지에 작성되기 때문입니다.
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");
onecount=6;
function changelocation(locationid)
{
document.myform.smalllocation.length = 0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>2) JavaScript는 데이터베이스를 직접 읽고 데이터베이스의 레코드를 가져와서 JavaScript에 쓴 다음 첫 번째 방법과 마찬가지로 JavaScript 함수를 호출하여 루프의 드롭다운 상자에 씁니다. . 이 방법은 데이터 소스를 JavaScript에서 분리하지만 데이터베이스 연결을 노출하는 것은 보안 관점에서 실용적인 가치가 거의 없습니다.
나의 방법은 xml 파일의 드롭다운 상자에 데이터를 넣고 자바스크립트를 사용하여 XML 파일을 읽고 드롭다운 상자에 내용을 가져오는 것입니다.
HTML 파일은 다음과 같습니다.
<!-- myfile.html -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
xmlDoc.async="false";
xmlDoc.load("account.xml");
xmlObj=xmlDoc.documentElement;
nodes = xmlDoc.documentElement.childNodes;
document.frm.mainclass.options.length = 0;
document.frm.subclass.options.length = 0;
for (i=0;i<xmlObj.childNodes.length;i++){
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
document.frm.mainclass.options[i].text=labels;
document.frm.mainclass.options[i].value=values;
}
}
</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
function deleteOption() {
}
function setsubclass(main){
var is_selected="N";
if (document.frm.subclass.options.length!=0) {
for (i=0;i<=document.frm.subclass.options.length;i++)
document.frm.subclass.options[i]=null ;
}
//重复才有效
if (document.frm.subclass.options.length!=0) {
for (i=0;i<=document.frm.subclass.options.length;i++){
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
}
}
for (i=0;i<xmlObj.childNodes.length;i++){
var values="";
var lables="";
if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
//alert(labels+ " | "+main);
if (labels==main){
is_selected="Y";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){
//subclass_name="document.frm.subclass";
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");
values=xmlObj.childNodes(i).childNodes(j).text;
//alert(values);
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels;
document.frm.subclass.options[j].value=values;
}
}
}
}
</script>
<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
account.xml 如下：
<?xml version="1.0" encoding="GB2312"?>
<item>
<class display_name="未选定">
<subclass display_name="">Not Available</subclass>
</class>
<class display_name="95788主叫卡">
<subclass display_name="1152069589-1152069638">dangdang1</subclass>
<subclass display_name="1152081031-1152081080">dangdang2</subclass>
<subclass display_name="1152547201-1105254750">dangdang3</subclass>
<subclass display_name="1152548401-1152548700">dangdang4</subclass>
<subclass display_name="1152548701-1152549000">dangdang5</subclass>
<subclass display_name="1156000001-1156010000">dangdang6</subclass>
</class>
<class display_name="网上注册">
<subclass display_name="1152000001-1152001000">zhuce_user1</subclass>
<subclass display_name="1151001000-1151005000">zhuce_user2</subclass>
</class>
<class display_name="通讯">
<subclass display_name="1156030001-1156080000">tongxun</subclass>
</class>
</item>이 방법은 자바스크립트 프로그램에서 데이터 소스를 분리하여 자주 변경되는 데이터 소스에 적합합니다. xmlDoc.load에서는 URL 매개변수를 직접 호출하고 원격 XML을 읽어 느슨한 결합을 달성할 수 있습니다. 위의 응용 프로그램은 IE6.0에서 통과됩니다. 단점은 드롭다운 상자 목록의 내용을 제거할 때
삭제 작업을 반복해야 한다는 것입니다. 그렇지 않으면 명백한 버그가 있을 수 있으므로 일부 독자들이 수정해 주시길 바랍니다.
위 내용은 Javascript에서 XML을 호출하여 링크된 드롭다운 박스 코드 생성에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.