Javascript innerHTML IE von <select>
Ich versuche, ändern Sie das innerHTML von einem element basierend auf dem Wert der vorherigen element.
Habe ich das javascript richtig greifen den aktuellen Wert und alles funktioniert einwandfrei im Firefox, Safari, Chrome und Opera. IE ist ein Schmerz.
Beispielcode:
<form action="soap.php" method="post">
<select name="circuitproduct" id="circuitproduct" onchange="bandwidthfunction();">
<option>Dedicated Voice</option>
<option>Frame Relay</option>
<option>ATM</option>
<option>Dedicated Internet</option>
<option>IP Solutions Private Port</option>
<option>IP Solutions Enhanced Port</option>
<option>Private Line – Domestic</option>
<option>Int’l Private Line</option>
<option>Qwest Metro Private Line (QMPL)</option>
<option>Qwest Metro Ethernet Private Line (QMEPL)</option>
</select><br />
<select name="term" id="term">
<option value="1-Year">1-Year</option>
<option value="2-Year">2-Year</option>
<option value="3-Year">3-Year</option>
</select>
<select id="bandwidth">
</select>
<select id="sublooptype">
</select>
</form>
javascript-Beispiel:
function bandwidthfunction() {
var product = document.getElementById('circuitproduct').value;
if (product == 'Dedicated Voice') {
document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
}
else if (product == 'Frame Relay') {
document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
}
IE ist in der Tat ein Schmerz. Wie genau ist es dir weh hier?
Das schließende tag Fiasko wirklich geschraubt Eure Antworten.
Ja, ja er Tat es.
Das schließende tag Fiasko wirklich geschraubt Eure Antworten.
Ja, ja er Tat es.
InformationsquelleAutor Xavias | 2010-08-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nun, zunächst einmal haben Sie eine schließende tag für den
select
dass Sie versuchen, innerhalb derselect
element, das macht den code ungültig.Dann gibt es möglicherweise ein problem mit wie die
select
element behandelt, es ist Inhalt. Wenn der HTML-code geparst wird, wird derselect
element keine untergeordneten Elemente, wie ein normales element hat. Statt die Optionen sind Elemente, die in esoptions
Sammlung.Wenn Sie möchten, ändern Sie die Elemente in der
select
element, ändern Sie die Inhalte deroption
Sammlung. I. e. um Elemente hinzuzufügen, erstellen Sieoption
Objekte mit derdocument.createElement
Methode und der Sammlung hinzufügen. Beispiel:Hmm was ich sagen kann, das funktioniert. Das einzige problem was ich sehe ist, dass der IE auch nicht, wie das "onchange" - Ereignis. Allerdings war dies die Antwort, die ich suchte, vielen Dank.
InformationsquelleAutor Guffa
Müssen Sie die "select"-Element und das Ende festlegen der innerHTML-Eigenschaft. Dies ist nicht ein Teil von innerHTML. Die das Ende-tag des Elements 'Bandbreite' selbst.
InformationsquelleAutor cpt.oneeye
Hier ist eine praktische Kerbe stieß ich auf, dass funktioniert im FF und IE als workaround für die Unfähigkeit, zu ändern, innerHTML auf Elemente auswählen.
oder wie eine Funktion für die Lesbarkeit:
InformationsquelleAutor Tyler W. Cox
Kurzem stieß ich auf dieses problem mit dem IE. Ich kam mit einer turnkey-Lösung, die arbeitet mit den folgenden Dingen im Hinterkopf:
Wir haben viele landing-pages Anforderung der gleichen Daten (Alter, Produkte, Land, Staat, etc... ), aber mit verschiedenen Optionen auszuwählen. Die Implementierung, die ich verwenden, fügt neue Optionen auszuwählen. Dies wurde getan, um zu ermöglichen, eine eigene Standard-option pro lading Seite. Eine Seite kann die erste option "select item", ein anderes "wählen Sie eine" und so weiter.
Wählen Sie format:
Hier ist die Funktion zum ANHÄNGEN/HINZUFÜGEN von Werten:
Nun zum ausführen der Funktion übergeben, in der select-Objekt und string-Werte:
Generiert diese ein wählen Sie mit die Optionen übergeben werden, auch im IE!
Wenn Sie benötigt das Skript zum ERSETZEN der Werte verwenden Sie die folgende:
Ich hoffe, dies hilft jemand anderes!
InformationsquelleAutor Eko3alpha
Eine schnelle Suche zeigt, war dies ein bekannter bug im IE seit mindestens IE5. Sie könnten versuchen, zu verwenden, createElement und make-Optionen und fügen Sie der select-Objekt, oder benutzen Sie eine Bibliothek wie jQuery und fügen Sie den html-Knoten (muss aufpassen, dass Sie von der Magie notwendig, um im IE funktioniert).
InformationsquelleAutor John Hoven
Die wirkliche Ursache des Problems ist, dass durch eine DOM-parsing - /Update-problem, D. H. wird nicht eingefügt Kind
option
Elementen, die in einemselect
element. Sogar der IE9 hat noch dieses problem (spätere Versionen nicht geprüft).Setzen Sie die
select
imdiv
oderspan
und ersetzen Sie die gesamteselect
. Nachfolgend finden Sie ein Beispiel, das zeigt, dass dann der IE ball spielen, wie gut. Weil das innerHTML-problem tritt in der Regel, wenn Sie dynamisch zu generieren wählt, habe ich mit einer AJAX & PHP-Beispiel.Die html-Datei:
.
Und die php-Datei, die benannt werden sollten 'getoptions.php" und sollte in den gleichen Ordner:
.
Sicher sein, wählen Sie nur die Optionen, die mit einem gelben hintergrund, in dieser demo.
InformationsquelleAutor Frank Conijn
Jquery
$('#bandwidth').html('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
InformationsquelleAutor John Adel