sur sélectionner affichage zone de texte avec jquery?

Question

Je suis sûr que c'est super facile, mais je ne peux pas penser à ce que je fais mal, de toute façon j'ai une liste de sélection "title" pour mon formulaire, et je veux afficher une zone de texte si "Autre" est sélectionné.

<select name="title" id="title" class="required"> 
    <option value="" selected="selected">- Select Title -</option> 
    <option value="Ms.">Ms.</option> 
    <option value="Mrs.">Mrs.</option> 
    <option value="Mr.">Mr.</option> 
    <option value="Dr.">Dr.</option> 
    <option value="Prof.">Prof.</option> 
    <option value="Rev.">Rev.</option> 
    <option value="Other" onclick="showOther();">Other</option> 
</select> 

function showOther() { 
    jQuery("#otherTitle").show(); 
} 

Mais cela ne fonctionne pas .. la zone de texte #otherTitle est masquée à l'aide de jquery lors du chargement de la page.

Answer 1

1. Utilisez jQuery pour lier vos gestionnaires d'événements au lieu de l'élément « onfoo » attributs
2. Vous êtes mieux lier le gestionnaire à l'élément « select », parce que il y a des façons dont l'option peut être sélectionnée qui ne sera pas impliquer un événement « clic »:

(texte à faire stackoverflow montrent le bloc de code ci-dessous)

$(function() { 
    $('#title').change(function() { 
    if ($(this).val() == 'Other') 
     $('#otherTitle').show(); 
    else 
     $('#otherTitle').hide(); 
    }); 
}); 

J'avais pref er pour donner à l'option "Autre" une valeur "id" plutôt que de se fier à la "valeur", mais peu importe.

Answer 2

je suggère une approche différente:

$("#title").change(function() { 
    if($(this).find("option:last").is(':selected')) { 
     $("#otherTitle").show(); 
    } else { 
     $("#otherTitle").hide(); 
    } 
}); 

C'est, si la dernière option est sélectionnée, afficher la zone de texte qui passe l'ID otherTitle. J'utilise réellement cette méthode. J'espère que cela pourra aider. Bien sûr, votre champ "Autre" doit toujours être le dernier pour que cela fonctionne - plus il est plutôt pratique pour les sites multilingues.

Answer 3

Bind un événement à votre liste de sélection, lorsque son changé, regardez la valeur et faites votre cachette/montrant

$(function(){ 

    $("#title").change(function() { 
     if ($(this).val() == 'Other') { 
      $("#otherTitle").show(); 
     } 
    }); 

}); 

Answer 4

$(function() {  
    $('#title').change(function() { 
     if (this.value === "Other") { 
     $("#otherTitle").show(); 
     } 
     else { 
     $("#otherTitle").hide(); 
     }  
    });  
}); 

et un Working Demo. ajouter/modifier l'URL pour voir le code