Question

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

<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>

Answer 1

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>');

Answer 2

使用您拥有的循环来创建一个站点名称字符串（或其他），而不是document.write。在每个字符后面加上换行符，即：+“\ n”+

在函数结束时添加以下行：this.innerHTML = myString;

“this”指的是函数调用元素，“innerHTML”指的是位于调用元素open和amp;之间的空间。关闭标签。它会覆盖其他任何东西（很像document.write会覆盖doc标签之间的所有内容）。从那里微调以获得你想要的结果。

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

document.write内容替换现有内容而不是显示在其下方

2 个答案: