从javascript中相同div的下拉列表中选择类别后显示项目答案

【问题标题】：Displaying items after selecting category from drop down in same div in javascript从javascript中相同div的下拉列表中选择类别后显示项目
【发布时间】：2014-03-15 04:03:48
【问题描述】：

我有一个下拉列表，选择类别后，它应该在同一 div 中显示该类别的项目。

我在“onChange”上写了一个函数，它也可以工作。当我点击汤时，它会显示汤的项目，然后当我点击开胃菜时，它应该只显示开胃菜，但它会显示汤项目，在其下方显示开胃菜。

我尝试使用 innerHTML 甚至 document.write 函数，但使用 document.write 会刷新页面并仅显示项目，我的下拉菜单和页面中的其他内容消失了。

请帮忙。提前致谢。

这里是函数。

<body>
    <div style="margin:left:80px;">
        <select id='menu' style='height:40px;width:160px;' onChange="displayItems()">
             <option value='items' selected='selected' disabled>Select Items</option>           
      <script>

       var rasvanti_menu=["Soup","Pasta","Pizza","Sandwich","Snacks","Starters","Bread","Rice","Rice/Noodles","Gravies","Beverages","Extras"];

        var rasvanti_soup=["Coriander soup","Cream of Veg soup","Cream of tomato soup","Hot and sour soup","Manchow soup","Palak soup","Sweet corn soup","Veg Clear soup"];

        var rasvanti_starters=["Baby Corn Chilli","Baby Corn Finger","Finger Chips","Harabhara Kabab","Manchurian Dry","Mushroom Tikka","Pan Crispy","Paneer 65","Paneer Chilly Dry","Paneer Malai Kabab","Paneer Manchurian Dry"];

              for(var i=0;i<=rasvanti_menu.length;i++)
             {
                 document.write("<option value='"+i+"'>"+rasvanti_menu[i]+"</option>");
             }

             var id = document.createElement("table");


    function displayItems() {
        var selectedMenu = document.getElementById('menu');
        var selectedSoup = selectedMenu.options[selectedMenu.selectedIndex].text;

        if (selectedSoup == "Soup") {
            for (var s = 0; s < rasvanti_soup.length; s++) {
                id.innerHTML += "<tr><td>" + rasvanti_soup[s] + "</td></tr>";
                document.getElementById("items_tray").appendChild(id);
            }

        } else if (selectedSoup == "Starters") {
            for (var l = 0; l < rasvanti_starters.length; l++) {
                id.innerHTML += "<tr><td>" + rasvanti_starters[l] + "</td></tr>";
                document.getElementById("items_tray").appendChild(id);
            }
        }
    }
 </select>

             <table id="items_tray">
             </table>

    </div>
</body>

【问题讨论】：

你能解决这个问题吗？
请附上您的代码示例。如果不查看您正在处理的内容，就不可能准确地确定问题并回答您的问题。
我已将我的函数发布到我显示项目的位置。

标签： javascript html drop-down-menu

【解决方案1】：

您的代码的问题似乎是您使用了一个名为“id”的变量而没有定义它？如果您发布完整的代码，人们将能够提出更好的解决方案。

【讨论】：

@Deepika 我明白了。使用 document.createElement('table'); 时，您正在创建一个表。但是，您需要将表格附加到页面中（否则表格属于哪里？）。我建议将其更改为： var id = document.getElementById('items_tray');因为看起来那是你想要结果的地方。否则，此处提供了正确使用 createElement 的示例：javascriptkit.com/javatutors/dom2.shtml

【解决方案2】：

当新数据附加到 items_tray 中的现有数据时，您会得到这个。

所以在将数据附加到 items_tray 之前，请尝试删除 items_tray 的 innerHTML，如下所示 -

if(selectedSoup=="Soup"){
      document.getElementById("items_tray").innerHTML = "";
      for(var s=0;s<rasvanti_soup.length;s++){
          id.innerHTML+="<tr><td>"+rasvanti_soup[s]+"</td></tr>";
          document.getElementById("items_tray").appendChild(id);
      }
}

第二个“如果”也是如此。

希望这会奏效。

【讨论】：

我试过阿布舍克，不行。 :( 我已经发布了整个代码。