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

Question

je le script suivant à la fin de ma page:

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(function() { 
     jQuery('#optElem').change(function(){ 
      jQuery.post('http://example.com', { 'id1': 1, id2 : jQuery(this).val() }, 
       function(data){ 
        jQuery('#abc').html(data.payload); 
        jQuery('#abc').effect("highlight", {}, 3000); 
       }, "json"); 
     }); 
    }); 
</script> 

J'ai une option champ de sélection avec id 'optElem'. Le code ci-dessus est censé être déclenché sur l'événement change, et je veux également passer la valeur de l'option sélectionnée au gestionnaire de rappel. L'événement change est correctement déclenché et capturé par jQuery, cependant, j'obtiens une valeur vide pour id2 (c'est supposé être la valeur de l'élément sélectionné). J'utilise JQuery (this) .val() - mais c'est étonnant, renvoyant une valeur vide - quelqu'un sait pourquoi?

L'option champ de sélection dans le code HTML ressemble aime ça:

<div> 
    <div> 
     <span id="yearElem">Year: </span><span id="optElem"> 
      <select> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
      </select> 
     </span> 
    </div>      
</div> 

Answer 1

C'est parce que optElem est un <span>, pas <select>. Vous associez l'événement de modification à l'étendue et, par conséquent, this fait référence à l'étendue lorsque vous êtes dans la fonction attachée au changement.

Puisque this est l'intervalle, il n'a pas de valeur associée.

La meilleure solution consiste à donner un identifiant à <select> et d'y attacher la fonction de modification. Il est beaucoup plus logique d'associer l'événement change au select plutôt qu'à un span.

Answer 2

Le val() ne fonctionne que sur des éléments d'entrée HTML (input, select, textarea, button). Vous devez déplacer le id="optElem" vers l'élément <select> et cela fonctionnera.

Answer 3

Essayez de changer la ligne 4 à ceci:

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

Cela vous fera travailler sur l'élément de sélection à l'intérieur du #optElement.

(voir aussi la réponse par BalusC, vous devez travailler sur un élément de sélection et non une étendue)

Answer 4

Oui! vous devez vous concentrer sur l'élément "Select"
en faisant cela!

jQuery('#optElem select:first-child').change(function(){ 
      // your codes here 
}); 

Answer 5

Ok, c'est une erreur que beaucoup d'entre nous ont faite. Comme l'a déclaré @BalusC, jQuery val() ne fonctionnera qu'avec des éléments d'entrée (entrée, sélection, zone de texte, bouton). Parce que les éléments comme div, span etc n'ont pas d'attributs value, il semble que jQuery a décidé de ne pas supporter cette fonction avec les autres. Maintenant, supposons que nous avons cette ul avec un certain 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 que nous avons besoin est la valeur de l'attribut value. Comme indiqué précédemment, val() ne fonctionnera pas à cause de la raison évidente. Mais pourquoi avons-nous encore 0 dans le second cas. attr('attributename') ne doit pas renvoyer la valeur réelle de l'attribut spécifié?Haha, le problème est, il semble jquery se confond lorsque le nom de l'attribut est value, c'est pourquoi il renvoie 0. Si nous devions changer le code 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 demandé la valeur de value1 attribut, alors nous aurions 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 le 2 avant html est que, dans le dernier, La valeur de l'attribut value est une valeur numérique, alors que dans les précédents, elle est une valeur alphanumérique. Pour une raison quelconque, jQuery fonctionne correctement lorsqu'un attribut personnalisé value a une valeur numérique et se comportera comme s'il s'agissait d'un élément de type entrée. Je me sentais un peu paresseux pour trouver la raison derrière cela. Donc, si vous êtes curieux, allez explorer le code source de jquery. Avoir un bon script.