Hinzufügen der Option zum Auswählen funktioniert nicht

Ich versuche, eine Option zur Auswahl mit dem folgenden Code hinzuzufügen. Aber auf der eigentlichen Seite ändert sich nichts.Hinzufügen der Option zum Auswählen funktioniert nicht

var x = document.getElementById("UserField"); 
var option = document.createElement("option"); 
option.text = "Kiwi"; 
x.add(option); 
console.log(document.getElementById("UserField"));

Was ich von console.log bekam ist:

<select id="UserField" class="jqTransformHidden"> 
    <option value="">(choose one)</option> 
    <option value="0">1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
    <option value="3">4</option> 
    <option value="4">5</option> 
    <option>Kiwi</option> 
</select>

So das Protokoll enthält Kiwi, aber wenn ich die Seite öffnen nicht dort sind es. Was könnte möglicherweise falsch sein?

Quelle

2016-11-14 user2817869

Versuchen Sie 'x.appendChild (Option);'. https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – nurdyguy

Ihr Code funktioniert korrekt. Er fügt nur Ihren Code innerhalb von window.onload – Geeky

scheint gut zu funktionieren. https://jsfiddle.net/obbfLfpk/ – isherwood

-2

Versuchen Sie, das JavaScript zu entfernen und zu überprüfen, ob es funktioniert. Ist dies der Fall bedeutet dies wahrscheinlich, Ihren JavaScript-Code einige Fehler hat, aber für den HTML-Code, den ich einen Fehler nicht wirklich sehen darin

Quelle

2016-11-14 22:15:31

Nicht wirklich eine Antwort. –

Von https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild:

Die Node.appendChild() -Methode fügt ein Knoten an das Ende der Liste von Children eines bestimmten übergeordneten Knotens. Wenn das angegebene Kind eine Referenz zu einem vorhandenen Knoten im Dokument ist, verschiebt appendChild() es von seiner aktuellen Position an die neue Position ( ist nicht erforderlich, den Knoten von seinem übergeordneten Knoten vor dem Anhängen an einen anderen Knoten zu entfernen) Knoten).

Wenn Sie etwas an ein dom-Element anhängen möchten, verwenden Sie appendChild(theChild) für das übergeordnete Element. Mike Brant wies darauf hin, add(item, before) sollte auch in Ordnung sein. (Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add)

Antwort:

Stellen Sie sicher, Ihr Skript ausgeführt wird, wenn die dom bereit ist (onload oder DOMContentLoaded).

Von https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload:

Die Last-Ereignis ausgelöst wird am Ende des Dokuments Ladevorgang. Unter dieser Punkt sind alle Objekte im Dokument im DOM und alle die Bilder, Skripte, Links und Unterrahmen sind fertig geladen.

function load() { 
    // execute your code here 
} 
window.addEventListener("load", load);

Sie dieses jsfiddle überprüfen: https://jsfiddle.net/pfc7fhkm/3/

Quelle

2016-11-14 22:16:06

Es funktioniert gut, wie vom OP veröffentlicht. Warum sollte diese Änderung notwendig sein? – isherwood

Ich kenne keine Standart 'add' Methode für Knoten. Ich kenne nur appendChild wie hier https://developer.mozilla.org/en-US/docs/Web/API/Node –

Ich würde zustimmen, vielleicht mit 'appendChild()' als einheitlicher zu anderen Code, anstatt der Spezifische Methode 'add()', die nur für ausgewählte Elemente über die HTMLSelectElement-Schnittstelle gilt. 'add()' hat zusätzliche Funktionalität, die, wenn sie verwendet wird, Grund sein könnte, add() 'vorzuziehen. –

window.onload = function() { 
 
    var x = document.getElementById("UserField"); 
 
    var option = document.createElement("option"); 
 
    option.text = "Kiwi"; 
 
    x.add(option); 
 
    console.log(document.getElementById("UserField")); 
 
}

<select id="UserField" class="jqTransformHidden"> 
 
    <option value="">(choose one)</option> 
 
    <option value="0">1</option> 
 
    <option value="1">2</option> 
 
    <option value="2">3</option> 
 
    <option value="3">4</option> 
 
    <option value="4">5</option> 
 

 
</select>

Hoffe, dass es

Quelle

2016-11-14 22:17:27 Geeky

Id es in eine Funktion machen hilft, aber Sie können es mit einem jQuery tun Klicken Sie auch

dies funktionieren wird, wenn es zu einer Onclick Funktion der Taste angebracht ist:

<script> 
var mydropdown = $('#UserField'); 
function add(){ 
    mydropdown.append("<option>"+$(this).val()+"</option>"); 
} 
</script>

dies für auch auf Klick arbeitet

<script> 
var mydropdown = $('#UserField'); 
var mybtn = $('#buttonId'); 
mybtn.click(function(){ 
    mydropdown.append("<option>+$(this).val()+"</option>"); 
}); 
</script>

Quelle

2016-11-14 22:23:19

Werke für mich, wenn ich das Skript im HEAD-Bereich platzieren. Kiwi taucht auf. Wo platzierst du dein Java Script? Ich habe den vollständigen Code hinzugefügt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
     <script type="text/javascript"> 
      var x = document.getElementById("UserField"); 
      var option = document.createElement("option"); 
      option.text = "Kiwi"; 
      x.add(option); 
    </script> 
</head> 
<body> 
    <select id="UserField" class="jqTransformHidden"> 
    <option value="">(choose one)</option> 
    <option value="0">1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
    <option value="3">4</option> 
    <option value="4">5</option> 
    <option>Kiwi</option> 
</select> 
</body> 
</html>

Quelle

2016-11-14 22:26:08

Hinzufügen der Option zum Auswählen funktioniert nicht

Antwort

Verwandte Themen