1

我有一个 XML 文件，每个元素都有一个名为 category 的子元素。在我的 HTML 页面上，我创建了一个下拉表单，其中列出了可能的类别（以及“全部”）。当用户从下拉列表中选择一个类别时，它会分配一个与该类别对应的 javascript 变量，然后我使用 javascript/ajax 遍历 XML 文件并显示具有该类别的元素列表。这一切正常......但是当它显示列表时，而不是在下拉列表下显示它，下拉列表完全消失了，你看到的只是列表。我想在下拉列表下方显示列表，以便用户可以选择不同的类别（如果他/她选择）。请帮我弄清楚为什么它摆脱了下拉菜单以及如何修复它。提前致谢！（而且，如果这是一个非常愚蠢的问题，请道歉......

<html>
<head>
<script>


//This is the basic XML stuff.
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }

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

xmlhttp.open("GET","websites.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("site");

//This is the part that handles printing the items under the various categories.
function printCat(cat)
    {
        if(cat=="all")
            {
                for (i=0;i<x.length;i++)
                    {
                        document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br/>");
                    }
            }

        else
            {
                for (i=0;i<x.length;i++)
                    {
                        if (x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue==cat)
                            {
                                document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br/>");
                            }
                    }
            }
    }
</script>
</head>
<body>

    <form action='../'>
        <select onchange='printCat(this.options[this.selectedIndex].value)'>
                <option value='all'>All</option>
                <option value='search'>Search</option>
                <option value='social_media'>Social Media</option>
        </select>
    </form>

</body>
</html>
4

2 回答 2

0

而不是 document.write，使用你必须创建一串站点名称（或其他）的循环。在每个字符之后包含换行符，即：+ "\n" +

在函数末尾添加以下行：this.innerHTML = myString;

“this”指的是函数调用元素，“innerHTML”指的是调用元素打开和关闭标签之间的空间。它将覆盖那里的任何其他内容（就像 document.write 将覆盖 doc 标签之间的所有内容一样）。从那里微调以获得您想要的结果。

例如，创建第二个下拉元素并从该元素调用函数。

于 2012-12-12T01:58:01.943 回答
0

jQuery 非常适合添加和删除这样的元素。这是一个基于您的 printCat() 函数的示例：http: //jsfiddle.net/hansvedo/kxcvx/

您可以看到下面的 jQuery 部分会将新的 LI 元素“附加”到现有列表中。

<ul id="websites">
    <li>websites added here</li>
</ul>

// jQuery
$('ul#websites').append('<li>' + x[i] + '</li>');
于 2012-12-11T23:35:37.000 回答