jQuery(this).val () - nicht wieder den Wert der ausgewählten option

Weil optElem ist ein <span>, nicht ein <select>. Sie befestigen das change-Ereignis der Spannweite, und als ein Ergebnis, this bezieht sich auf den span, wenn Sie innerhalb der Funktion beigefügt, zu ändern.

Seit this ist die Spanne, ist es nicht Wert zugeordnet.

Ihre beste Wette ist, zu geben, die <select> eine id, und befestigen Sie die ändern-Funktion, um es statt. Es macht viel mehr Sinn, um das change-Ereignis zugeordnet werden, die select eher als eine span.

InformationsquelleAutor zombat

Versuchen zu ändern, Zeile 4:

jQuery('#optElem select').change(function(){

Dieser Sie auf das select-element innerhalb des #optElement.

(siehe auch die Antwort von BalusC, müssen Sie arbeiten auf einem select-element, nicht eine Spanne)

InformationsquelleAutor Emil Vikström

Ok, das ist ein Fehler, die viele von uns gemacht haben. @BalusC hat erklärt, jQuery val() funktioniert nur mit input-Elemente(input, select, textarea, button). Weil Elemente, wie div, span usw.. nicht value Attribute, so scheint es jQuery hat sich entschieden, keine Unterstützung für diese Funktion mit den anderen. Nun nehmen wir an, wir haben das ul mit einigen li ' s:

<ul id="tireBrands">
  <li value="Yokohama">Yokohama</li>
  <li value="Michelin">Michelin</li>
  <li value="Continental">Continental</li>
  <li value="Dunlop">Dunlop</li>
</ul>

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 0;
    alert($(this).attr('value'));//case 2: Will still alert 0;
});

Was wir also brauchen, ist der Wert der value Attribut. Wie bereits gesagt: val() wird nicht funktionieren, weil der offensichtliche Grund. Aber warum tun wir immer noch 0 im zweiten Fall. Sollte nicht attr('attributename') Gegenzug den aktuellen Wert des angegebenen Attributs? Haha, das problem ist, es scheint, jquery verwechselt wird, wenn der name des Attributs ist value, das ist, warum es gibt 0 zurück. Wenn wir ändern die oben genannten html so:

 <ul id="tireBrands">
  <li value1="Yokohama">Yokohama</li>
  <li value1="Michelin">Michelin</li>
  <li value1="Continental">Continental</li>
  <li value1="Dunlop">Dunlop</li>
</ul>

und fragte nach dem Wert von value1 Attribut, dann würde man den tatsächlichen Wert.

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 0;
    alert($(this).attr('value1'));//case 2: Will alert "Yokohama or Michelin, whichever one is clicked";
});

Schließlich, hier ist ein weiteres setup:

 <ul id="tireBrands">
  <li value="1">Yokohama</li>
  <li value="2">Michelin</li>
  <li value="3">Continental</li>
  <li value="4">Dunlop</li>
</ul>

Nun sehen, was passiert:

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 1 or 2 or 3 or 4;
    alert($(this).attr('value'));//case 2: Will also alert 1 or 2 or 3 or 4;
});

Den Unterschied zwischen der letzten und der vorherigen 2-html ist, dass der Letzte Wert der value Attribut ist ein numerischer Wert, während in den vor lieben es ist ein alphanumerischer Wert. Für einige Grund, jQuery ist in Ordnung, wenn eine benutzerdefinierte value Attribut hat einen numerischen Wert und Verhalten sich, als ob Sie beschäftigt sich mit einem input-element. Ich fühlte mich ein bisschen faul, um herauszufinden, den Grund hinter ihm. Also, wenn Sie neugierig sind, erkunden Sie die Welt der jquery-source-code. Haben ein nettes scripting.

InformationsquelleAutor Mikayil Abdullayev