web-dev-qa-db-fra.com

Comment afficher les champs de saisie de formulaire en fonction de la valeur sélectionnée?

Je sais que c'est simple et que je dois effectuer une recherche dans Google. J'ai essayé de mon mieux et je n'ai pas pu trouver de meilleure solution. J'ai un champ de formulaire, qui prend quelques entrées et un champ de sélection, qui a des valeurs. Il a également une valeur "Autre". 

Ce que je veux c'est: 

Si l'utilisateur sélectionne l'option «Autre», un champ de texte spécifiant que «Autre» doit être affiché. Lorsqu'un utilisateur sélectionne une autre option (que "Autre"), je souhaite la masquer à nouveau. Comment puis-je effectuer cela en utilisant JQuery? 

Ceci est mon code JSP

<label for="db">Choose type</label>
<select name="dbType" id=dbType">
   <option>Choose Database Type</option>
   <option value="Oracle">Oracle</option>
   <option value="mssql">MS SQL</option>
   <option value="mysql">MySQL</option>
   <option value="other">Other</option>
</select>

<div id="otherType" style="display:none;">
  <label for="specify">Specify</label>
  <input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>

Maintenant, je souhaite afficher la balise DIV ** (id = "otherType") ** uniquement lorsque l'utilisateur sélectionne Other . Je souhaite essayer JQuery. C'est le code que j'ai essayé

<script type="text/javascript"
    src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>    
$('#dbType').change(function(){

   selection = $('this').value();
   switch(selection)
   {
       case 'other':
           $('#otherType').show();
           break;
       case 'default':
           $('#otherType').hide();
           break;
   }
});
</script>

Mais je ne peux pas obtenir ceci. Que devrais-je faire? Merci

javascriptjqueryhtmljsp
15
iCode

Vous avez quelques problèmes avec votre code: 

  1. il manque une citation ouverte sur l'id de l'élément select, alors: <select name="dbType" id=dbType"> 

devrait être <select name="dbType" id="dbType">

  1. $('this') devrait être $(this): les guillemets à l'intérieur de la parenthèse ne sont pas nécessaires.

  2. utilisez .val () au lieu de .value () lorsque vous souhaitez récupérer la valeur d'une option

  3. quand vous initialisez "selection" faites-le avec un var devant, sauf si vous l'avez déjà fait au début de la fonction

essaye ça:

   $('#dbType').on('change',function(){
        if( $(this).val()==="other"){
        $("#otherType").show()
        }
        else{
        $("#otherType").hide()
        }
    });

http://jsfiddle.net/ks6cv/

UPDATE à utiliser avec switch:

$('#dbType').on('change',function(){
     var selection = $(this).val();
    switch(selection){
    case "other":
    $("#otherType").show()
   break;
    default:
    $("#otherType").hide()
    }
});

UPDATE avec des liens pour jQuery et jQuery-UI:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
32
DVM

Démo sur JSFiddle

$(document).ready(function () {
    toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
    // this will call our toggleFields function every time the selection value of our other field changes
    $("#dbType").change(function () {
        toggleFields();
    });

});
// this toggles the visibility of other server
function toggleFields() {
    if ($("#dbType").val() === "other")
        $("#otherServer").show();
    else
        $("#otherServer").hide();
}

HTML:

    <p>Choose type</p>
    <p>Server:
        <select id="dbType" name="dbType">
          <option>Choose Database Type</option>
          <option value="Oracle">Oracle</option>
          <option value="mssql">MS SQL</option>
          <option value="mysql">MySQL</option>
          <option value="other">Other</option>
        </select>
    </p>
    <div id="otherServer">
        <p>Server:
            <input type="text" name="server_name" />
        </p>
        <p>Port:
            <input type="text" name="port_no" />
        </p>
    </div>
    <p align="center">
        <input type="submit" value="Submit!" />
    </p>
5
Editor

Vous devez utiliser val() au lieu de value() et vous avez manqué le devis de départ id=dbType" devrait être id="dbType"

Démo en direct

Changement

selection = $('this').value();

À

selection = $(this).val();

ou

selection = this.value;
2
Adil
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
function myfun(){
$(document).ready(function(){

    $("#select").click(
    function(){
    var data=$("#select").val();
        $("#disp").val(data);
                     });
});
}
</script>
</head>
<body>

<p>id <input type="text" name="user" id="disp"></p>

<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>

</body>
</html>
0
Ganesh Nagare
$('#dbType').change(function(){

   var selection = $(this).val();
   if(selection == 'other')
   {
      $('#otherType').show();
   }
   else
   {
      $('#otherType').hide();
   } 

});
0
Devang Rathod

J'ai eu sa réponse. Voici mon code

<label for="db">Choose type</label>
<select name="dbType" id=dbType">
   <option>Choose Database Type</option>
   <option value="Oracle">Oracle</option>
   <option value="mssql">MS SQL</option>
   <option value="mysql">MySQL</option>
   <option value="other">Other</option>
</select>

<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>

Et mon script est

$(function() {

        $('#dbType').change(function() {
            $('.selectDBType').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });
0
iCode