將搜索框更改爲下拉列表

搜索框將項目名稱與xml中的項目名稱匹配。我需要做的是把這些項目放在一個下拉菜單中。我一直在無休止地尋找一種方法來從xml中獲取項目，而無需在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() { 
      var searchItem=document.getElementById("searchItem").value; 
      for (var i=0; i<items.length; i++) { 
       product=items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; 


       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><input type="select" size="20" id="searchItem" value="Enter item"> 
       <input type="button" value="Search" onclick="findItem()"></td> 


      <td class="center" id="stockLevel"></td> 
      <td class="center" id="price"></td>  
     </tr> 
     </table>  

     </body> 
     </html>

來源

2015-10-03 PMG

它看起來像你要找的只是從項目數組中獲取信息。

您只需循環訪問javascript中的items數組並將其添加到選擇列表中即可。

像這樣的東西應該讓你開始：

<select id="dropdownlistofitems"> 
</select> 

fillDropdown(); 
function fillDropdown(){ 
$.each(items, function (index, value) { 
$('#dropdownlistofitems').append($('<option/>', { 
    value: value, 
    text : value 
})); 
}); 
}

來源

2015-10-03 20:41:02 Blake

是否有一個簡單的解決方案？即使你可以解釋它，我也可以試着弄明白。 – PMG

將搜索框更改爲下拉列表

回答

相關問題