Ceci est une question classique mais ne trouve pas la meilleure approche. J'ai une liste déroulante avec ID Project_Billing_Code_ID et 3 valeurs (1, 2, 3).
Si la valeur sélectionnée = 1 puis montre div avec ID One et seulement celui-ci. Dou deux et trois doivent être cachés.
Je veux aussi faire cela arriver lorsque la vue est chargée de sorte que non seulement le changement.
4 Réponses :
Vous étiez proche. Vous voulez probablement quelques petits ajusteurs aux comportements pour vous assurer que toutes les divs cachées et que CORRECT DIV apparaît sur la charge de la page.
avoir une pièce de lecture avec le code ici: http://jsfiddle.net/irama/zfzra/2/ p>
ou saisissez le code JS mis à jour ici: p>
hideAllDivs = function () {
$("#hourly, #per_diem, #fixed").hide();
};
handleNewSelection = function () {
hideAllDivs();
switch ($(this).val()) {
case '1':
$("#hourly").show();
break;
case '2':
$("#per_diem").show();
break;
case '3':
$("#fixed").show();
break;
}
};
$(document).ready(function() {
$("#project_billing_code_id").change(handleNewSelection);
// Run the event handler once now to ensure everything is as it should be
handleNewSelection.apply($("#project_billing_code_id"));
});
Salut @gaelle Pouvez-vous clarifier ce que vous voulez dire lorsque vous dites que la valeur est enregistrée? Pouvez-vous poster un échantillon complet de code? (Vous voudrez peut-être essayer d'édition jsfiddle.net/irama/zfzra/1 - cliquez sur Exécuter Pour tester votre code, cliquez sur Mettre à jour lorsque vous avez terminé et ajoutez la nouvelle URL à un commentaire ici.)
Voici ce qui se passe. Valeur sauvegardée = 2, forme de formulaire avec per_diem montré. Super. Si je sélectionne la valeur 3, alors per_diem retiré mais corrigé non montré. Si la valeur sauvegardée = 3 charges de formulaire avec fixe affichée, mais si je sélectionne la valeur2, puis résumée, mais per_diem non affichée. Cependant, si je sélectionne la valeur 1, cela fonctionne bien.
Merci @gaelle - juste pour vous assurer que je vous comprends: il semble que la valeur soit enregistrée sur le côté serveur? Et puis vous rechargez / revitalisant la page, qui réussit, mais une fois que vous avez changé la valeur à nouveau, toutes les divs sont cachés? Si tel est le cas, pourriez-vous poster une copie du code HTML rendu lorsque vous rechargez / revisit la page?
Salut à nouveau @gaelle - il semble que cela pourrait être un problème avec le HTML qui est rendu après l'enregistrement de la page. Avez-vous eu de la chance?
Le problème provenait du HTML produit. Corrigé maintenant. Votre solution fonctionne comme un charme. Merci beaucoup. J'apprécie
n'utilisez pas de cache-cache à partir du document.Eutention, car il doit attendre que le DOM charge. Ajouter un style en ligne = "Affichage: Aucun;"
Drop the $ ("# project_billing_code_id") à l'intérieur de votre instruction IF et utilisez ceci à la place car vous avez déjà accès à l'élément DOM via le gestionnaire d'événements, utilisez-le. ) .val () ou cela.val (). Faites également votre code réutilisable afin que vous puissiez l'appeler à partir de différents scripts. P>
var PayRate = (function(){
var _obj = {};
var hideShow = function(elem){
if($(elem).val() === '1'){
$("#hourly").show();
}else if($(elem).val() === '2'){
$("#per_diem").show();
}else if($(elem).val() === '3'){
$("#fixed").show();
}else{
$("#hourly, #fixed, #per_diem").hide();
}
};
_obj.checkValue = function(){
hideShow($('#project_billing_code_id'))
};
var events = function(){
$('#project_billing_code_id').change(function(){
hideShow(this);
});
};
$(document).ready(function(){
events ();
checkValue ();
});
return _obj;
}());
Fiddle de travail strong> Voici comment j'ai fait cela a fonctionné pour moi . p> CSS fort> p> <select id="reasonDropDown" name="Select">
<option>Select One</option>
<option>Select Two</option>
<option>Select Three</option>
<option value="other" id="other">Other</option>
</select>
<div class="otherReasonTextBox">Other Reason Textbox</div>
Vous devez juste ajouter
$ ("# per_diem"). Masquer (); $ ("# corrigé"). Masquer () to$ ("# horaire"). Afficher () , idem pour les autres conditions. Les autres restent donc cachés lorsque vous montrez une div.