JavaScript-Array-Element aus HTML entfernen?

Ich bin mir bewusst, dass dies schon einmal gefragt wurde, aber mein Code funktioniert nicht.JavaScript-Array-Element aus HTML entfernen?

Meine Assessment-Aufgabe ist es, etwas ähnlich einem Listenfeld aus einem JavaScript-Array aufzufüllen und dann den Wert zu löschen. Ich dachte mein Code sollte funktionieren, aber es wird nicht funktionieren.

Markup:

var sel = document.getElementById('cars'); 
 
var carArray = ["Audi", "BMW", "Porsche"] 
 
for (var i = 0; i < carArray.length; i++) { 
 
    var listBox = document.createElement('option'); 
 
    listBox.innerHTML = carArray[i]; 
 
    listBox.value = carArray[i]; 
 
    sel.appendChild(listBox); 
 
} 
 

 
function deleteFunc() { 
 
    var selInd = document.getElementById("cars").selectedIndex; 
 
    carArray.splice(selInd - 1, selInd + 1); 
 
}

<form> 
 
    <select id="cars" multiple> 
 
    <option id="carBrand"></option> 
 
    </select> 
 
    <button onclick="deleteFunc()">Delete</button> 
 
</form>

Quelle

2016-06-01 Smithy

Möchten Sie den 'Select'-Eingang aktualisieren? – Rayon

@ Rayon Ja, das tue ich. – Smithy

1. Schritt: Ändern Sie den Typ der Schaltfläche, um nur eine Schaltfläche zu sein, indem Sie 'type =" button "' hinzufügen, ansonsten fungiert sie als Übergabeknopf, der das Formular posten und die Seite neu laden wird – Andreas

remove() die optionindex
.splice Verwendung erwartet first argument als index des Elements entfernt werden, und das zweite Argument ist number of elements entfernt werden.

var sel = document.getElementById('cars'); 
 
var carArray = ["Audi", "BMW", "Porsche"] 
 
for (var i = 0; i < carArray.length; i++) { 
 
    var listBox = document.createElement('option'); 
 
    listBox.innerHTML = carArray[i]; 
 
    listBox.value = carArray[i]; 
 
    sel.appendChild(listBox); 
 
} 
 

 
function deleteFunc() { 
 
    var selInd = document.getElementById("cars").selectedIndex; 
 
    if (selInd > -1) { 
 
    document.getElementById("cars").options[selInd].remove(); 
 
    carArray.splice(selInd, 1); 
 
    console.log(carArray); 
 
    } 
 
    return false; //to prevent from submission 
 
}

<form> 
 
    <select id="cars" multiple> 
 
    </select> 
 
    <button onclick="return deleteFunc()">Delete</button> 
 
</form>

Quelle

2016-06-01 07:41:23 Rayon

@Andreas, Updated ..Danke :) – Rayon

Danke haufen! Ich habe das Skript ausgeführt und es lief. Was macht die 'console.log (carArray);' tun? – Smithy

[__'Console.log() '__] (https://developer.mozilla.org/en/docs/Web/API/Console/log) – Rayon

Sie sind falsch, die Spleiß-Methode verwendet wird, ist der erste Wert von Spleiß sollte der Index des ausgewählten Elements sein, und der zweite Wert ist, wie viele Elemente, die Sie aus entfernt, möchten Ihr Array.

Das nächste Problem besteht darin, dass Sie die Liste nicht mit den aktualisierten Array-Werten neu füllen.

Das letzte Problem ist, dass Sie vergessen haben, Ihrer Schaltfläche eine Art von Schaltfläche zu geben, um zu verhindern, dass das Formular gesendet wird (Neuladen der Seite), wenn Sie auf die Schaltfläche klicken.

Hier ist, wie der Code aussehen sollte.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

</head> 
<body onLoad="populateList()"> 
    <form> 
     <select id="cars" multiple> 
      <option id="carBrand"></option> 
     </select> 
     <button type="button" onclick="deleteFunc()">Delete</button> 
    </form> 
    <script> 
     var sel = document.getElementById('cars'); 
     var carArray= ["Audi", "BMW", "Porsche"] 


     function populateList() { 
      sel.innerHTML = ""; 
      for (var i = 0; i < carArray.length; i++) { 
       var listBox = document.createElement('option'); 
       listBox.innerHTML = carArray[i]; 
       listBox.value = carArray[i]; 
       sel.appendChild(listBox); 
      } 
     } 

     function deleteFunc() { 
      var selInd = sel.selectedIndex; 
      carArray.splice(selInd, 1); 
      console.log(carArray); 
      populateList();    
     } 
    </script> 
</body> 
</html>

Lesen Sie mehr über den Spleiß Funktion here.

Quelle

2016-06-01 07:45:22

JavaScript-Array-Element aus HTML entfernen?

Antwort

Verwandte Themen