jQuery(formElement).val(null) : résultats incohérents dans différents navigateurs

Question

Le code est ici :

http://jsfiddle.net/jf7t2/1/

Veuillez l'exécuter sur les dernières versions de tous les navigateurs, et vous verrez par vous-même. Lorsque l'on clique sur le bouton, on :

1. sur Chrome (et Safari bien sûr), il ne sélectionne rien, mais crée une option vide fantomatique
2. sur Firefox et Opera, il fonctionne comme je l'attends et le souhaite, désélectionne toutes les options
3. sur Internet Explorer, il ne fait rien

Quel est donc le comportement attendu ?

Answer 1

Si vous regardez la ligne 1970 du code source de jQuery 1.5.1, vous verrez ceci :

// Treat null/undefined as ""; convert numbers to string
if ( val == null ) {
    val = "";

Le comportement attendu est donc le même que si vous donniez la chaîne vide comme argument.

Si vous continuez sur la ligne 1984, vous verrez ceci :

} else if ( jQuery.nodeName( this, "select" ) ) {
  var values = jQuery.makeArray(val);

  jQuery( "option", this ).each(function() {
    this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
  });
  if ( !values.length ) {
   this.selectedIndex = -1;
  }

Le comportement attendu est donc le suivant :

1. s'il existe un option avec une valeur de chaîne vide, choisissez-la.
2. s'il n'est pas défini selectedIndex = -1

À partir de là, c'est au navigateur de déterminer ce qu'il doit faire si selectedIndex est fixé à -1

En regardant la bibliothèque msdn il est dit :

L'indice sélectionné pr si l'objet sélectionné ne contient aucun élément sélectionné. La définition de la propriété selectedIndex efface tout les éléments sélectionnés existants.

Il semble donc que le comportement attendu soit la désélection de toutes les options.

Il en va de même pour le Documentation du MDC et donc firefox, où ils sont très explicites à ce sujet

Renvoie l'index de sélectionné. Vous pouvez sélectionner un élément en attribuant son index à cette propriété à cette propriété. En attribuant -1 à cette propriété tous les éléments seront désélectionnés.

Il semble que les navigateurs basés sur webkit aient une vision différente des choses.

Si vous cherchez sur Google "webkit selectedIndex", vous verrez plusieurs rapports de bogues concernant la balise select, donc peut-être que c'est juste un peu bizarre ;)

En y réfléchissant, il s'agit d'un bug dans jQuery puisque c'est une bibliothèque qui devrait pouvoir se comporter de la même manière dans tous les navigateurs - cela devrait être signalé ;)

Answer 2

Quel est le comportement attendu ?

de jQuery val() est documenté pour prendre une valeur de chaîne ou un tableau de valeurs de chaîne, il n'y a donc pas de comportement défini.

Essayer val([]) pour ne rien sélectionner, ou pour rétablir la valeur d'origine, utiliser la touche defaultSelected propriété :

$('#select option').each(function() {
    this.selected= this.defaultSelected;
});

Answer 3

J'ai remplacé votre jsfiddle par un autre qui, je pense, peut vous aider : http://jsfiddle.net/marcosfromero/AYLrT/

Je l'ai testé dans IE, Firefox et Chrome

jQuery("#button").click(function(event){
    var select = jQuery("#select");
    // Button click will try to find a "none" option (with no value)
    if(select.find('option.none').length===0) {
        // If it's not found, it creates the option
        select.prepend('<option value="" class="none"></option>');   
    }
    // And then it selects it
    select.val('');
});

// When select value is changed...
jQuery('#select').change(function() {
    var me = $(this);
    // ... to something different than empty ("")...
    if(me.val() !== '') {
        //... it removes that option
        me.find('option.none').remove();   
    }
});

Answer 4

Aucun de ces comportements n'est déraisonnable. Dans Chrome, c'est logique parce que la valeur n'est pas définie, donc rien n'est affiché. Dans IE, c'est logique parce que vous ne changez pas de valeur valide, donc cela ne change rien.

Si vous souhaitez que tous les navigateurs se comportent comme Firefox, il suffit de fixer la valeur à 1.