用xml填充下拉菜单，并以html形式查看结果

filling dropdown menu with xml and view the result in a html form

本文关键字：结果 html 并以 xml 填充 下拉菜单      更新时间：2023-09-26

我有这个xml文件(charter.xml(：

<?xml version="1.0" encoding="utf-8"?>
<root>
 <chapter>
     <lesson_1>message 1</lesson_1> 
     <lesson_2>message 2</lesson_2>
     <lesson_3>message 3</lesson_3>
     <lesson_4>message 4</lesson_4>
     <lesson_5>message 5</lesson_5>
     <lesson_6>message 6</lesson_6>
     <lesson_7>message 7</lesson_7>
     <lesson_8>message 8</lesson_8>
     <lesson_9>message 9</lesson_9>
     <lesson_10>message 10</lesson_10>
     <lesson_11>message 11</lesson_11>
</chapter>

这是html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
    //load xml document
<script type="text/javascript">
function loadXMLDoc(numders)
{
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xhttp=new XMLHttpRequest();
}
else
 {// code for IE6, IE5
 xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xhttp.open("GET",numders,false);
 xhttp.send();
 return xhttp.responseXML;
} 
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("chapter.xml");
M = xmlDoc.getElementsByTagName("lesson_1");
for (i=0;i<M.length;i++)
{
document.write(M[i].childNodes[0].nodeValue);
document.write("<br />");
} 
</script>
<form  id="form1" name="form1" method="GET" action="">
<label for="textfield1"></label>
<input style="border-style: inset" maxlength="70" size="90" type="text" name="" id="" />
</form>
<table>
<p style="font-family:'Monotype Corsiva'"  align="right">chapter              
<select style="width:100px" name="lessons">
           <option>lesson_1</option>
           <option>lesson_2</option>
           <option>lesson_3</option>
           <option>lesson_4</option>
           <option>lesson_5</option>
           <option>lesson_6</option>
           <option>lesson_7</option>
           <option>lesson_8</option>
           <option>lesson_9</option>
           <option>lesson_10</option>
           <option>lesson_11</option>
</select>
</p>
</table>
</body>
</html>

当我从下拉列表菜单中选择第一个选项"课程_1"时，我想从上面表格中的xml文档"消息1"加载，等等，第二个选项"课_2"从xml"消息2"加载。。。

对我的问题有什么建议吗？

提前感谢！

您似乎在使用一本非常过时的教程/书籍。

这行代码特别清楚地显示了

else
 {// code for IE6, IE5
 xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

你应该考虑去掉教程，使用现代的工具包/框架，比如jQuery、mootools或YUI，它内置了这个功能(对你自己来说非常容易(

jQuery文档提供了将AJAX与jQuery结合使用的极好介绍，其中向您展示了一个易于理解和使用的片段。

x=xmlDoc.getElementsByTagName("chapter");
for (int i = 0; i < x.childNodes.length; i ++) {
 addOption(x.childNodes[i].textContent);
}

addOption是用于添加选项的js函数。

首先，一个格式良好的xml文档必须包含一个根(父(节点，您所显示的xml包含一个未关闭的根节点。请关闭那个。''

接下来，我做了一个快速更改，使其仅适用于IE，您可以将其更新为适用于其他浏览器，PFB代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
    function fetchMessage(el) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.open("GET", "chapter.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;

        // var items = xmlDoc.getElementsByTagName('chapter');
        var item = xmlDoc.selectSingleNode("//" + el.value).text;

        document.getElementById("message").value = item;

    }
</script>
</head>
<body>
<form id="form1" name="form1" method="GET" action="">
<label for="textfield1">
</label>
<input style="border-style: inset" maxlength="70" size="90" type="text" name="" id="message" />
</form>
<table>
    <p style="font-family: 'Monotype Corsiva'" align="right">
        chapter
        <select style="width: 100px" name="lessons" onchange="fetchMessage(this);">
            <option>lesson_1</option>
            <option>lesson_2</option>
            <option>lesson_3</option>
            <option>lesson_4</option>
            <option>lesson_5</option>
            <option>lesson_6</option>
            <option>lesson_7</option>
            <option>lesson_8</option>
            <option>lesson_9</option>
            <option>lesson_10</option>
            <option>lesson_11</option>
        </select>
    </p>
</table>
</body>
</html>
相关文章：