2010-03-01 5 views
2

J'ai une zone où un morceau de HTML (illustré ci-dessous) est ajouté dynamiquement autant de fois que l'utilisateur le souhaite. Pas de soucis là-bas. Le problème est, dans ce bloc HTML est une boîte de sélection, puis un div qui est caché par défaut, mais devrait être montré si l'option "dropdown" est sélectionné dans le menu de sélection. Donc, le problème que j'ai est d'afficher/cacher ce div quand il y a plusieurs blocs identiques de HTML. Ce que je suppose, c'est que je dois dire que le div juste après le menu de sélection qui a été invoqué est le seul qui doit avoir une action appliquée ... mais je ne suis pas sûr de savoir comment le faire .jQuery: show() et hide() dans l'ordre?

Répondre

3

En supposant que la div bascule-mesure suit le parent sélectionne (comme indiqué par votre exemple):

$(".select_change").live("change", function(){ 
    $(this).val() === "dropdown" 
    ? $(this).parent().next().show() 
    : $(this).parent().next().hide(); 
    } 
}); 
+0

Peut également utiliser '.toggle()': '$ (this) .parent(). Next(). Toggle ($ (this) .val() ===" liste déroulante ");' –

+0

@Nick: Certainement :) – Sampson

0

Changer votre sélection balise d'ouverture à ce qui suit:

<select name="" class="select_change" onchange="if ($(this).val() == 'dropdown') { $(this).closest('div').next('div').removeClass('hidden'); } else { $(this).closest('div').next('div').addClass('hidden'); }"> 
0

Vous pouvez faire quelque chose comme ceci:

$('select.select_change').change(function(e){ 
    $(this).parent('div').next('div.dropdown_fields').removeClass('hidden'); 
}); 
+0

Je suppose qu'il voudra qu'il se cache à nouveau lorsqu'un autre élément est sélectionné. –

Questions connexes