数组元素没有显示在javascript中的选择框中

我在数组中添加了新元素，并试图将所有这些元素动态地设置为java脚本中的选择框，但是在浏览器的每次刷新选择框中都会变空但是，在浏览器刷新时，框外显示的列表不会更改。数组元素没有显示在javascript中的选择框中

<html> 
    <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"><br></br> 
    <p id="errorMsg"></p> 
    <button onclick="addToStock()">Add</button> 
    <p id="showList"></p> 
    <select id="showInDropDown"> 
      <option disabled selected style="display: block;">Stock Items</option> 
     </select> 
    <script> 
var fruitsfromLS = localStorage.getItem("fruits"); 
var fruits = fruitsfromLS ? JSON.parse(fruitsfromLS) : ["Banana", "Orange", "Apple", "Mango"]; 
document.getElementById("showList").innerHTML = fruits; 
var newItem = document.getElementById("addItemInStock"); 

function addToStock() { 
    if ((newItem.value) === "") { 
     document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 
     document.getElementById("errorMsg").style.display = "block"; 
    } else { 
     document.getElementById("errorMsg").style.display = "none"; 
     fruits.push(newItem.value); 
     //this is added extra 
     // localStorage.setItem("fruits", JSON.stringify(fruits)); 
     var StoredFruits = localStorage.setItem("fruits", JSON.stringify(fruits)); 

     document.getElementById("showList").innerHTML = fruits; 
     clearAndShow(); 
    } 

    var sel = document.getElementById("showInDropDown"); 
    document.getElementById("showInDropDown").innerHTML = ""; 
    for (var i = 0; i < fruits.length; i++) { 
     var opt = document.createElement('option'); 


     opt.innerHTML = fruits[i]; 
     opt.value = fruits[i]; 
     sel.appendChild(opt); 
    } 
} 

function clearAndShow() { 
    newItem.value = ""; 
} 
    </script> 

    </html>

来源

2016-11-17 Prasad_Joshi

由于内容是动态添加的，因此它们往往会在每次刷新页面时丢失其值。这是正常的行为。 –

我们如何实现将这些数组元素动态地存储在选择框中。 –

你应该填写它在evry页面加载然后 –

因为你只需要添加在addToStock选择项目，并单击按钮时它才会调用。试试这个

<html> 
    <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"><br></br> 
    <p id="errorMsg"></p> 
    <button onclick="addToStock()">Add</button> 
    <p id="showList"></p> 
    <select id="showInDropDown"> 
     <option disabled selected style="display: block;">Stock Items</option> 
    </select> 
    <script> 
     var fruitsfromLS = localStorage.getItem("fruits"); 
     var fruits = fruitsfromLS ? JSON.parse(fruitsfromLS) : ["Banana", "Orange", "Apple", "Mango"]; 
     document.getElementById("showList").innerHTML = fruits; 
     var newItem = document.getElementById("addItemInStock"); 

     function addToStock() { 
      if ((newItem.value) === "") { 
       document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 
       document.getElementById("errorMsg").style.display = "block"; 
      } else { 
       document.getElementById("errorMsg").style.display = "none"; 
       fruits.push(newItem.value); 
       //this is added extra 
       // localStorage.setItem("fruits", JSON.stringify(fruits)); 
       var StoredFruits = localStorage.setItem("fruits", JSON.stringify(fruits)); 

       document.getElementById("showList").innerHTML = fruits; 
       clearAndShow(); 
      } 
      fillSelect(); 

     } 

     function fillSelect(){ 
      var sel = document.getElementById("showInDropDown"); 
      document.getElementById("showInDropDown").innerHTML = ""; 
      for (var i = 0; i < fruits.length; i++) { 
       var opt = document.createElement('option');      
       opt.innerHTML = fruits[i]; 
       opt.value = fruits[i]; 
       sel.appendChild(opt); 
      } 
     } 

     function clearAndShow() { 
      newItem.value = ""; 
     } 

     window.onload = function(){ 
      fillSelect(); 
     }; 

    </script> 
</html>

我搬到选择填充码出自身的功能，并调用它的页面加载使用时window.onload

来源

2016-11-17 10:00:12

是没有任何工作，直接存储在选择框中的元素，而不是填充它在每一页加载。 –

您可以使用像PHP这样的服务器端语言来生成HTML代码，但是您必须将该数据存储在其他地方 –

您需要fruitsfromLS调用addToStock在页面加载，为每个项目：

(fruitsfromLS || []).forEach(function(fruit) { 
    addToStock(fruit) 
});

来源

2016-11-17 10:00:15 Joe

数组元素没有显示在javascript中的选择框中

回答

相关问题