Ändern .html() von <option> setzt selectedIndex-Eigenschaft von <option> von ‚-1‘ auf ‚0‘

jQuery verwenden, wenn .html() eines <option> in einem <select> ändert (was ich vorher selectedIndex Eigenschaft auf -1 gesetzt hatte) setzt selectedIndex Eigenschaft <select> von '-1' auf '0'Ändern .html() von <option> setzt selectedIndex-Eigenschaft von <option> von ‚-1‘ auf ‚0‘

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<select id="myselect" class="drpmnu"> 

    <option id="one" >(01)</option> 

    <option id="two" >(02)</option> 

    <option id="three" >(03)</option> 

</select> 
    <script> 
    $(".drpmnu").prop('selectedIndex', -1) 
    $('#three').html("moo") 
    </script> 
</body> 
</html>

http://jsbin.com/filowe/2/edit?html,output

Quelle

2015-01-29 Anonymous

Das Beste, was ich herausfinden kann, ist, dass es ein Repaint-Problem ist. Wenn Sie den Text der Option ändern, bewirkt dies, dass die Auswahl neu gezeichnet wird. Im Repaint gibt es ein Problem, bei dem die Requisite auf den Standardwert zurückgesetzt wird. –

'$ ('# three') [0] .text =" moo ";' setzt den Index nicht zurück, aber 'textContent' tut das. – dandavis

@dandavis, '$ ('# drei') [0] .text = "moo",' nicht in IE nicht funktioniert (zumindest in IE11) – Kiril

Dieser Fall im HTML5 spec erwähnt:

Auf Einstellung der selectedIndex Attribut muss die selectedness aller Option Elemente in der Liste der Optionen auf false, und dann die Option Element In der Liste der Optionen, deren Index der angegebene neue Wert ist, muss der Wert selectedness auf true und dreckig auf true gesetzt sein.

Hinweis: Dieses in keinem Element führen kann einen selectedness Satz gilt auch im Falle des select-Element, das keine Mehrfach Attribut und einer Displaygröße von 1.

. ..

Wenn Knoten eingefügt oder Knoten entfernt werden, führt die Liste der Optionen zu einem oder mehreren Optionselementen oder wenn ein Optionselement in der Liste der Optionen asks for a reset ist, dann, wenn das Element des Auswahlelements multipl Das Attribut abwesend ist, die Anzeigegröße des Auswahlelements 1 ist und die Option selectedness für keine Optionselemente in der Auswahlliste des Auswahlelements auf true gesetzt ist, muss der Benutzeragent die selectedness des ersten Optionselements in der Liste festlegen der Optionen in Baumreihenfolge, die nicht deaktiviert ist, sofern vorhanden, auf "wahr".

Ändern einer Option über seine innerHTML oder textContent-Eigenschaft löst diesen Reset (außer Firefox), aber die text Eigenschaft (die <option> nur ist) ist es nicht auslösen (außer IE).

// these triggers the <select> element's reset (except on Firefox) 
$("#three")[0].innerHTML = "foo"; 
$("#three")[0].textContent = "foo"; 

// this does not trigger the reset (except on IE) 
$("#three")[0].text = "foo";

Firefox die Spezifikation streng mehr folgt, es setzt nur die <select> wenn es eine neue <option> ist, oder es war eine Entfernung von einem der <option> s. Aber es kann den Reset nicht ausführen, während <option> 's selected Eigenschaft auf false (aber that should trigger der Reset auch) gesetzt wird.

Kurz gesagt, alle aktuellen Browser nicht die Spezifikation vollständig zu implementieren, so dass die einzige plattformübergreifende Abhilfe ist selectedIndex als letzte Operation ein ausgesuchtes zu ändern (und seine untergeordneten Elemente):

$("#three").html("moo"); 
$(".drpmnu").prop("selectedIndex", -1);

Quelle

2015-02-09 14:33:46 pozs

Es ist, weil Sie die HTML sind Einstellung Inhalt von $('#three') nach Voreinstellung des Index. Wenn Sie also den Index -1 beibehalten möchten, ordnen Sie den zu ladenden Code neu an.

<script> 
    $('#three').html("moo"); 
    $(".drpmnu").prop('selectedIndex', -1); 
</script>

Ein onchange-Ereignis wird automatisch ausgelöst, wenn sich ein Elementwert ändert. Also das Zurücksetzen des Indexes.

Quelle

2015-01-29 07:48:47 RhapX

Trotz, dass diese Antwort das Problem löst, ist es interessanter, warum Wechsel html nach Wahl des Auswahl selectedIndex – F0G

beeinflusst @ F0G die aktualisierte Antwort – RhapX

Wenn ja, sehen sollte nicht '$ (‚# drei‘) Trigger (‚Veränderung‘). 'haben den gleichen Effekt wie' $ ('# drei') .html ("moo"); 'für selectedIndex? – F0G

Das Verhalten ist in verschiedenen Browsern unterschiedlich. Ich habe gerade in Firefox eingecheckt und es funktionierte ohne Fehler. Es zeigte mir ein leeres Dropdown und ich überprüfte, dass der ausgewählte Index -1 war. Das Ergebnis war in Chrome nicht dasselbe.

Idealerweise wird -1 als Auswahl verwendet, wenn beim Start keine Option ausgewählt wurde. Ich bin mir nicht sicher, ob -1 programmgesteuert über alle Browser eingestellt werden kann.

Der HTML-Code der Änderungsoption löst das Änderungsereignis nicht aus, wenn dies der Fall wäre - der folgende Code endet mit einer Endlosschleife.

var i = 0; 
$(".drpmnu").change(function (e) { 
    i++; 
    $('#three').html("data" + i); 
})

Quelle

2015-01-29 09:21:06 Vijay

Vijay, stimme ich zu. Die Chrome-Entwicklungstools listen das Ereignis auch nicht auf! –

Zuerst habe ich in eine JQuery .html() Funktion gesucht, aber konnte nichts finden, die das Problem verursachen könnte. Dann habe ich versucht, change innerHTML property without jquery (das ist, was ich zuerst hätte tun sollen). Bei Firefox 33.1 und 34.0.5 sieht es OK aus, setzt aber 0.mit Chrome 40.0.2214.94, IE 10 und Opera 27.0.1689.66 zurück.

Ich denke, das beweist, dass @ Blake Plumbs Kommentar für einige Browser korrekt ist.

Es ist ein Repaint-Problem. Wenn Sie den Text der Option ändern, bewirkt dies, dass die Auswahl auf Repaint erfolgt. Im Repaint gibt es ein Problem, bei dem der Propeller auf den Standardwert zurückgesetzt wird.

Quelle

2015-02-06 22:27:09 F0G

Ändern .html() von <option> setzt selectedIndex-Eigenschaft von <option> von ‚-1‘ auf ‚0‘

Antwort

Verwandte Themen