jQuery(this).val() ne retourne pas la valeur de l'option sélectionnée

C'est parce que optElem est un <span>, pas un <select>. Vous êtes à la fixation de l'événement de changement de la durée, et comme un résultat, this se réfère à la durée lorsque vous êtes à l'intérieur de la fonction attachée à changer.

Depuis this est la durée, il n'a pas de valeur associée.

Votre meilleur pari est de donner à l' <select> un id, et de fixer le changement de fonction à la place. Il fait beaucoup plus de sens à l'événement de changement de être associée avec la select plutôt qu'un span.

OriginalL'auteur zombat

Essayer de changer la ligne 4:

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

Cela vous fera travailler sur sélectionnez un élément à l'intérieur de la #optElement.

(voir aussi la réponse par BalusC, vous avez besoin de travailler sur un élément select, pas une travée)

OriginalL'auteur Emil Vikström

Ok, c'est une erreur que beaucoup d'entre nous ont fait. @BalusC a déclaré, jQuery val() ne fonctionne qu'avec les éléments d'entrée(input, select, textarea, bouton). Parce que des éléments comme la div, span, etc. n'ont pas value attributs, il semble que jQuery a décidé de ne pas prendre en charge cette fonction avec les autres. Supposons maintenant que nous avons cette ul avec quelques li:

<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;
});

Donc ce dont nous avons besoin est la valeur de la value attribut. Comme dit plus tôt, val() ne fonctionne pas en raison de l'évidence de la raison. Mais pourquoi on a toujours 0 dans le second cas. Ne devrait pas attr('attributename') retour de la vraie valeur de l'attribut spécifié? Haha, le problème est, il semble jquery devient confus lorsque le nom de l'attribut est value, c'est pourquoi elle retourne 0. Si nous devions changer le html ci-dessus comme ceci:

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

et de demander la valeur de value1 attribut, nous pouvons obtenir la valeur réelle.

$('#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";
});

Enfin, voici une autre configuration:

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

Maintenant voir ce qui se passe:

$('#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;
});

La différence entre le dernier et l'avant 2 html, c'est que, dans la dernière, la valeur de la value attribut est une valeur numérique, alors que dans les précédentes, c'est une valeur alphanumérique. Pour une raison que jQuery est très bien lorsqu'une coutume value attribut a une valeur numérique et se comporte comme si elle traite avec une entrée comme élément. Je me sentais un peu paresseux pour trouver la raison derrière elle. Donc, si vous êtes curieux, allez explorer le jquery, le code source. Avoir un beau script.

OriginalL'auteur Mikayil Abdullayev