Affichage d'une zone de texte en fonction de la sélection dans la zone de sélection

Question

J'ai une application dans laquelle l'utilisateur doit entrer dans Industry en remplissant un formulaire. Nous avons plusieurs choix prédéfinis dans la liste déroulante, mais il doit également entrer manuellement. Il peut cliquer sur Autre, et une boîte de saisie devrait s'afficher pour demander l'entrée manuelle.

J'ai écrit ces codes javascript qui résout mon but, mais quand la page se charge .. Je peux voir la boîte là même si l'utilisateur n'a rien sélectionné. Comment est-ce que je peux corriger ceci, ainsi ceci montre seulement une case à cocher quand l'utilisateur clique sur autre, ou supprime la case à cocher si l'utilisateur clique sur une autre option après avoir frappé une autre fois.

code HTML: p

<tr> 
    <td>Industry*</td> 
    <td> 
     <select name="industry" id="industry" class="validate[required]" onchange="javascript: test()"> 
      <option value="BPO">BPO</option> 
      <option value="Call Centre"> Call Centre </option> 
      <option value="Software">Software</option> 
      <option value="Networking">Networking</option> 
      <option value="Management">Management</option> 
      <option value="Other">Other</option> 
     </select> 
    </td> 
</tr> 
<tr> 
    <td></td> 
    <td> 
     <input type="text" name="industryo" id="industryo" placeholder="Enter Manually"> 
    </td> 
</tr> 

JS

<script> 
function test() 
{ 
    //alert("something"); 
    var industry = document.getElementById('industry').value; 
    if(industry == "Other") 
    { 
    $(document).ready(function() { 
     // Handler for .ready() called. 
     $('#industryo').show(); 
    }); 
    } 
    else 
    { 
    $(document).ready(function() { 
     $('#industryo').hide(); 
    }); 
    } 
} 
</script> 

Toute suggestion est utile.

Answer 1

Vous pouvez d'abord se cacher avec CSS dans votre HTML:

<input type="text" 
     name="industryo" 
     id="industryo" 
     placeholder="Enter Manually" 
     style="display: none;" /> 

ou dans notre fichier CSS:

#industryo { display: none; } 

ou jQuery:

<script> 
    // Shorthand for $(document).ready() 
    $(function() { $("#industryo").hide(); }); 
</script> 

Answer 2

Je pense que c'est ce que vous voulez. Initialement, masquer votre entrée, puis l'afficher/masquer selon si la liste déroulante a "Autre" sélectionné. Vous pouvez utiliser l'événement on change pour vérifier cela.

Demo here

//Hide initially 
$('#industryo').hide(); 

$('#industry').on('change', function() { 
    if($(this).val() == "Other") { 
     $('#industryo').show(); 
    } else { 
     $('#industryo').hide(); 
    } 
});