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

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 に答える
0

document.writeの代わりに、サイト名の文字列（またはその他）を作成するために必要なループを使用します。それぞれの後に改行文字を含めます。つまり、+ "\ n" +

関数の最後に次の行を追加します。this.innerHTML=myString;

「this」は要素を呼び出す関数を指し、「innerHTML」は呼び出し元の要素のopenタグとcloseタグの間にあるスペースを指します。そこにある他のものを上書きします（document.writeがdocタグ間のすべてを上書きするのと同じように）。そこから微調整して、希望する結果を取得します。

たとえば、2番目のドロップダウン要素を作成し、その要素から関数を呼び出します。

于 2012-12-12T01:58:01.943 に答える