Question

在这个函数中，我试图从xml中的项目填充下拉菜单。循环只是拿起最后一个项目，即Creamed Rice，我一直在无休止地寻找它为什么得到这个而不是其余的。

任何意见或想法都会非常受欢迎。感谢

            function findItem() {
             for (var i=0; i<items.length; i++) {
                  product=items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                  document.getElementById("searchItem").innerHTML=product;
                  searchItem=document.getElementById("searchItem").innerHTML;
                  if (product==searchItem) {
                     id=items[i].getAttribute("id");
                     stockLevel=items[i].getElementsByTagName("numInStock")[0].childNodes[0].nodeValue;
                     price=items[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;

                     document.getElementById("id").innerHTML=id;
                     document.getElementById("stockLevel").innerHTML=stockLevel;
                     document.getElementById("price").innerHTML=price;
                  }
               }
            }

xml

            <?xml version="1.0"?>
            <stock>

            <item id="101">
               <name>Baked Beans</name>
               <numInStock>20</numInStock>
               <price>0.69</price>
            </item>   

            <item id="102">
               <name>Canned Soup</name>
               <numInStock>35</numInStock>
               <price>0.55</price>
            </item>   

            <item id="103">
               <name>Dog Food</name>
               <numInStock>15</numInStock>
               <price>1.50</price>
            </item>

            <item id="104">
               <name>Sardines</name>
               <numInStock>13</numInStock>
               <price>1.89</price>
            </item>

            <item id="105">
               <name>Creamed Rice</name>
               <numInStock>10</numInStock>
               <price>0.80</price>
            </item>

            </stock>

所有HTML

            <!DOCTYPE html>
            <html>
            <head>

            <style type="text/css">
            table { border-collapse:collapse }
            td { padding:10px; border:solid #000 1px } 
            td.center { text-align:center }
            td.noBox { border:none }
            </style>

            <script type="text/javascript">

            var items;

            if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
                var xmlhttp=new XMLHttpRequest();
            } else { // IE6, IE5
                var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","stock.xml",false);
            xmlhttp.send();
            xmlDoc=xmlhttp.responseXML;
            items=xmlDoc.getElementsByTagName("item"); 


                            function findItem() {
                             for (var i=0; i<items.length; i++) {
                                  product=items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                                  document.getElementById("searchItem").innerHTML=product;
                                  searchItem=document.getElementById("searchItem").innerHTML;
                                  if (product==searchItem) {
                                     id=items[i].getAttribute("id");
                                     stockLevel=items[i].getElementsByTagName("numInStock")[0].childNodes[0].nodeValue;
                                     price=items[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;

                                     document.getElementById("id").innerHTML=id;
                                     document.getElementById("stockLevel").innerHTML=stockLevel;
                                     document.getElementById("price").innerHTML=price;
                                  }
                               }
                            }   

            </script>
            </head>

            <body>
            <h1>Product list</h1>


            <script type="text/javaScript">
            document.write("<p>There are " + items.length + " items available</p>");
            </script>

            <table>
            <tr><th>id</th><th>Product</th><th>Stock level</th><th>Price</th></tr>

            <tr>
                <td class="noBox" id="id"></td>
                <td>
                <select onClick="findItem()">
                    <option id="searchItem">
                    </option>
                </select>
                </td>
                <td class="center" id="stockLevel"></td>
                <td class="center" id="price"></td>    
            </tr>

            </table>    

            </body>
            </html>

Answer 1

无法运行代码，问题可能出现在以下行：

document.getElementById("searchItem").innerHTML=product

您总是替换此元素，因此页面上显示的内容只是最后一个元素。

Answer 2

你的html中只有一个条目，你怎么能期望更多弹出。

HTML只将一个xml项目拉入下拉列表

2 个答案: