Javascript 将搜索框更改为下拉列表_Javascript_Html_Xml

Javascript 将搜索框更改为下拉列表

javascript html xml

Javascript 将搜索框更改为下拉列表,javascript,html,xml,Javascript,Html,Xml,搜索框将项目名称与xml中的项目名称相匹配。我需要做的是把这些项目放在下拉菜单中。我一直在寻找一种无需在html文件中硬编码就可以从xml中获取项目的方法。这是我的密码： <!DOCTYPE html> <html> <head> <style type="text/css"> table { border-collapse:collapse } td

搜索框将项目名称与xml中的项目名称相匹配。我需要做的是把这些项目放在下拉菜单中。我一直在寻找一种无需在html文件中硬编码就可以从xml中获取项目的方法。这是我的密码：

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

看起来您要查找的只是从items数组中获取信息

您只需在javascript中循环遍历items数组并将其添加到select列表中

像这样的事情应该让你开始：

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

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

有更简单的解决方案吗？即使你能解释，我也能试着弄明白。