web-dev-qa-db-fra.com

Afficher et masquer l'élément html lors du changement d'option sélectionné

Dans une page JSP, j'ai une liste déroulante. Lorsque le premier élément de la liste est sélectionné, je veux qu'une zone de texte s'affiche à droite sur le clic. Je suis nouveau sur Javascript/Jquery, donc il me manque évidemment quelque chose dans la fonction (la zone de texte ne s'affiche jamais). J'espère que quelqu'un pourra vous aider.

Voici le HTML:

<tr class="odd gradeX">
    <td class="col-lg-3">
        <div>
            <label>Show text area</label>
            <select id="show" class="form-control" name="show_text_area" onchange="change()">
                <option value="1">YES</option>
                <option value="0">NO</option>
            </select>

        </div>
    </td>
    <td class="col-lg-3">
        <div>
            <label>Text area</label>
            <textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"></textarea>
        </div>
    </td>
</tr>

Voici la fonction, en plus de la JSP:

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");
    if(selected === '1'){
        textarea.show();
    }
    else{
        textarea.hide();
    }
});</script>
javascriptjqueryhtmljsp
8
user3673449

Vous avez une erreur à la fin de votre fonction - supprimez la dernière);

Enfin ce devrait être:

<select id="show" class="form-control" name="show_text_area" onchange="change(this)">


function change(obj) {


    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");

    if(selected === '1'){
        textarea.style.display = "block";
    }
    else{
        textarea.style.display = "none";
    }
}
9
alvery

Vous pouvez utiliser jQuery comme suit

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;

    if(selected === '1'){
        $('#text_area').show();
    }
    else{
        $('#text_area').hide();
    }
}</script>
4
Yaman

  1. Utilisez jQuery.

  2. Supprimer la fonction onchange="change()" de

    <select id="show" class="form-control" name="show_text_area" onchange="change()">

  3. Recherchez l'événement de changement, sur votre élément sélectionné.

    $('#show').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 1){
       $("#text_area").show();
   } else {
       $("#text_area").hide();
   }
});

Violon

2
anurag

vous pouvez également utiliser jquery.

$('#show').val();
   if( $('#show').val() == "1")
    {
         $('#text_area').show(); 
              OR
           $("#text_area").css("visibility", "visible");
   }else
   {
      $('#text_area').hide(); 
              OR
           $("#text_area").css("visibility", "hidden");
  }
1
Mitul Maheshwari

Essayez ce code:

// This will create an event listener for the change action on the element with ID 'show'
$('#show').change(function() {

     // If checkbox is 'checked'
    if($(this).is(':checked')) {
        // show the element that has the id 'txt_area' 
        $('#text_area').show();
    } else {
        // hide it when not checked
        $('#text_area').hide();
    }
});
1
Praveen

Vous obtenez l'élément html par document.getElementById qui renvoie un objet javascript normal. Les méthodes Jquery hide () et show () sont disponibles pour objets jquery uniquement.

Mais tout ce que vous voulez réaliser peut être réalisé par simple Javascript, juste fait quelques changements simples.

au lieu de show () et hide (), utilisez respectivement textarea.style.display = "block" et textarea.style.display = "none";

et supprimez le ); à la fin de votre code.

utilisez le lien violon pour exemple de travail. lien violon

0
Rawat Raman

vous pouvez le faire dans jQuery ..... comme "$ (document) .ready (function () {

var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});

"

0
swapnil patil

Vous pouvez également utiliser jQuery comme suit.

$("#show").change(function(){
   if($(this).val()=="1")
   {    
       $("#text_area").show();
   }
   else
   {
       $("#text_area").hide();
   }
});

Démo

0
Sadikhasan

Votre fonction est correcte, mais la classe js Element n'a pas de méthodes show () et hide (). Vous pouvez l'implémenter à l'aide d'un prototype. Par exemple

Element.prototype.hide(){
this.style.display = "hidden";
} 
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}

Mais mieux vaut utiliser jquery ou quelque chose comme ça.

0
degr
var drpVal=  $('#show').val();
if( drpVal == "1")
{
     $('#text_area').show(); 
          // or u can use
       $("#text_area").css("display", "");
 }
 else{
  $('#text_area').hide(); 
          // or u can use
       $("#text_area").css("display", "none");
 }
0
A Beginner