HTML только вытягивает один элемент xml в выпадающий список

Здесь внутри этой функции я пытаюсь заполнить выпадающее меню из элементов в xml. Цикл только подбирает последний элемент, который является Creamed Rice, я бесконечно смотрю, почему он получает этот, а не остальные.HTML только вытягивает один элемент xml в выпадающий список

Любой вход или идеи были бы очень желанными. Благодаря

  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>

источник

2015-10-03 PMG

, не будучи в состоянии запустить свой код, то проблема может быть в следующей строке:

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

Вы всегда заменяете этот элемент, поэтому то, что отображается на странице, является последним.

источник

2015-10-03 23:28:46 Filype

Я как бы понимаю, что вы имеете в виду, но как бы вы посоветовали мне это сделать? – PMG

@PMG вы также можете разместить свой HTML-код? – Filype

Не записывая пример кода, вам нужно создать один элемент для каждого элемента и * добавить * каждый элемент к родительскому элементу, например '# searchList' – Filype

В вашем html есть только одна запись, как вы можете ожидать появления всплывающих окон.

источник

2015-10-03 23:44:17 RogerChern

Я не уверен как добавить больше, я попытался сделать больше тегов параметров, но он просто отобразил пустые строки в раскрывающемся меню. – PMG

HTML только вытягивает один элемент xml в выпадающий список

ответ

Смежные вопросы