jQuery: Réglage de l'option de sélection dynamique

Question

child.attr('selectedIndex', 1); 

Cela ne semble pas fonctionner dans mon cas.

J'ai deux listes déroulantes en cascade, un parent et un enfant. Pour commencer, ils contiennent tous deux les mêmes valeurs. Lorsqu'un utilisateur sélectionne un élément dans la zone de sélection parente, il est supprimé en tant que choix dans la sélection enfant.

Parfois, la zone de sélection parente a seulement 3 éléments, la valeur par défaut et 2 valeurs. Lorsqu'un utilisateur sélectionne une valeur parente dans ce cas, le seul choix possible dans la sélection enfant est la valeur non-par défaut restante. Par conséquent, lorsque le parent n'a que deux valeurs, je voudrais automatiquement sélectionner la valeur qui n'est pas par défaut dans la boîte enfant lorsqu'un utilisateur sélectionne un élément parent.

Le code HTML Je commence par peut-être comme suit:

<select name="from" class="from"> 
<option value="" selected="selected" class="default">Select a value</option> 
<option value="na">One</option> 
<option value="ja">Two</option> 
</select> 
<select name="to" class="to"> 
<option value="" selected="selected" class="default">Select a value</option> 
<option value="na">One</option> 
<option value="ja">Two</option> 
</select> 

Ensuite, si l'utilisateur sélectionne « un » dans le parent, l'enfant doit choisir automatiquement une « Two » sélectionné.

Voici mon jQuery que j'utilise pour supprimer une valeur de l'enfant quand est sélectionné une valeur dans la société mère:

(function ($) { 
     function cascadeSelect(parent, child) { 
      var childOptions = child.find('option:not(.default)'); 
      child.data('options', childOptions); 
      parent.change(function() { 
       childOptions.remove(); 
       child.append(child.data('options').filter('.' + this.value)) 
        .change(); 
       if (child.data('options').length == 2) { 
        [select the last option here] 
       } 

      }) 

      if (parent.val()) { 
       childOptions.not('.default, .' + parent.val()).remove(); 
      } 

     } 


     $(function() { 
      cascadeForm = $('.askform'); 
      pulldown_from = cascadeForm.find('.from'); 
      pulldown_to = cascadeForm.find('.to'); 

      cascadeSelect(pulldown_from, pulldown_to); 
     }); 

J'ai ajouté la ligne qui vérifie s'il n'y a que deux options chez l'enfant select:

   if (child.data('options').length == 2) { 
        [select the non-default child option here] 
       } 

Mais je n'arrive pas à comprendre comment sélectionner l'option enfant par défaut. Je pensais que je pouvais le faire en utilisant le .selectedIndex:

child.attr('selectedIndex', 1); 

Mais cela semble faire référence aux valeurs d'index d'origine (les indices comme ils l'étaient avant d'avoir retiré la valeur sélectionnée dans le parent).

Alors, comment puis-je sélectionner automatiquement la seule option autre que celle par défaut dans la sélection enfant lorsqu'il n'y a que deux options pour commencer dans le parent?

Answer 1

Je pense avoir trouvé quelques problèmes.

Dans cette ligne:

child.append(child.data('options').filter('.' + this.value)) 
      .change(); 

Il semble que vous essayez de filtrer à l'aide d'un sélecteur pour la classe (pas la valeur). Vous devriez, espérons-être en mesure de résoudre ce problème en changeant votre sélecteur afin qu'il filtre basé sur la valeur de l'option:

child.append(child.data('options').filter('[value="' + this.value + '"]')) 
      .change(); 

La meilleure façon de sélectionner une valeur dans un menu déroulant est d'utiliser simplement val().En d'autres termes, la ligne que vous êtes après lire:

child.val(this.value); 

J'ai créé un JS Fiddle si vous voulez voir tout travail chose: http://jsfiddle.net/KkNHr/1/

Answer 2

Cela semble fonctionner ... mais pourquoi ne pas utiliser attr?

child.get(0).selectedIndex = 1; 

Answer 3

Voir par référence: http://jsfiddle.net/YqGU8/

$(".from").change(function() { 
var val = $(this).find(":selected").val(); 
$(".to option[value='" + val + "']").remove(); 
$(".to option:last").attr('selected','selected'); 
});​