配列要素がjavacriptの選択ボックスに表示されない

配列に新しい要素を追加し、これらの要素をすべてJavaスクリプトの選択ボックスに動的に設定しようとしていますが、もう一度。ボックスの外側に表示されているリストは、ブラウザの更新時に変更されません。配列要素がjavacriptの選択ボックスに表示されない

<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に選択項目を追加している、とボタンがクリックされたときにのみ呼ばれていますので。ページのロードがwindow.onload

出典

2016-11-17 10:00:12

ではなく、選択したボックスに直接要素を格納するのではなく、すべてのページの読み込み時に再度入力する必要はありません。 –

PHPのようなサーバーサイドの言語を使ってHTMLコードを生成することはできますが、そのデータを別の場所に保存する必要があります –

あなたはfruitsfromLS内の各項目について、ページのロードに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>

は私が独自の機能を選び出す充填コードを動かしてみて、それを呼び出します：

出典

2016-11-17 10:00:15 Joe

配列要素がjavacriptの選択ボックスに表示されない

答えて

関連する問題