web-dev-qa-db-fra.com

jQuery sélectionner modifier afficher/masquer un événement div

J'essaie de créer un formulaire qui, lorsque l'élément de sélection 'parcel' est sélectionné, affiche un div, mais lorsqu'il n'est pas sélectionné, j'aimerais masquer le div. Voici mon balisage pour le moment:

C'est mon HTML jusqu'à présent ..

    <div class="row">    
    Type
        <select name="type" id="type" style="margin-left:57px; width:153px;">
                <option ame="l_letter" value="l_letter">Large Letter</option>
                <option name="letter" value="letter">Letter</option>
                <option name="parcel" value="parcel">Parcel</option>
        </select>                    
</div>

<div class="row" id="row_dim">
    Dimensions
        <input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
        <input type="text" name="width" class="dimension" placeholder="Width">
        <input type="text" name="height" class="dimension" placeholder="Height">
</div>

Ceci est mon jQuery jusqu'à présent ..

  $(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        $("select[@name='parcel']:checked").val() == 'parcel').show();   
    });
});
jqueryhtmlhideshow
8
user2716389

Utilisez la suite de JQuery. Démo

$(function() {
    $('#row_dim').hide(); 
    $('#type').change(function(){
        if($('#type').val() == 'parcel') {
            $('#row_dim').show(); 
        } else {
            $('#row_dim').hide(); 
        } 
    });
});
34
Yasitha

Essayer: 

if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

Ou même:

$(function() {
    $('#type').change(function(){
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();  
    });
});

JSFiddle: http://jsfiddle.net/3w5kD/

3
Cherniv
<script>  
$(document).ready(function(){
    $('#colorselector').on('change', function() {
      if ( this.value == 'red')
      {
        $("#divid").show();
      }
      else
      {
        $("#divid").hide();
      }
    });
});
</script>

Faites comme ça pour chaque valeur Changez aussi les valeurs ... selon vos paramètres

1
saurabh yadav

changez votre méthode jquery en

$(function () { /* DOM ready */
    $("#type").change(function () {
        alert('The option with value ' + $(this).val());
        //hide the element you want to hide here with
        //("id").attr("display","block"); // to show
        //("id").attr("display","none"); // to hide
    });
});
1
Vinay Pratap Singh

J'ai utilisé l'extrait de code jQuery ci-dessous pour qu'un élément select- affiche un élément div- doté d'une id qui correspond à value de l'élément option- tout en masquant les divs qui ne correspondent pas. Pas sûr que ce soit le meilleur moyen, mais c'est un moyen.

$('#sectionChooser').change(function(){
    var myID = $(this).val();
    $('.panel').each(function(){
        myID === $(this).attr('id') ? $(this).show() : $(this).hide();
    });
});
.panel {display: none;}
#one {display: block;}
<select id="sectionChooser">
    <option value="one" selected>Thing One</option>
    <option value="two">Thing Two</option>
    <option value="three">Thing Three</option>
</select>

<div class="panel" id="one">
    <p>Thing One</p>
</div>
<div class="panel" id="two">
    <p>Thing Two</p>
</div>
<div class="panel" id="three">
    <p>Thing Three</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
mycotn

Rien de nouveau, mais la mise en cache de vos collections jQuery aura un petit boost

$(function() {

    var $typeSelector = $('#type');
    var $toggleArea = $('#row_dim');

    $typeSelector.change(function(){
        if ($typeSelector.val() === 'parcel') {
            $toggleArea.show(); 
        }
        else {
            $toggleArea.hide(); 
        }
    });
});

Et dans Vanilla JS pour une super vitesse:

(function() {

    var typeSelector = document.getElementById('type');
    var toggleArea = document.getElementById('row_dim');

    typeSelector.onchange = function() {
        toggleArea.style.display = typeSelector.value === 'parcel'
            ? 'block'
            : 'none';
    };

});
0
i_like_robots

Essayez le JS ci-dessous

$(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        if ($(this).val() == 'parcel')
        {
             $('#row_dim').show();
        }
    });
});
0
Saranya Sadhasivam

Essaye ça:

$(function() {
    $("#type").change(function() {
        if ($(this).val() === 'parcel') $("#row_dim").show();
        else $("#row_dim").hide();
    }
}
0
Cthulhu

Essaye ça:

 $(function () {
     $('#row_dim').hide(); // this line you can avoid by adding #row_dim{display:none;} in your CSS
     $('#type').change(function () {
         $('#row_dim').hide();
         if (this.options[this.selectedIndex].value == 'parcel') {
             $('#row_dim').show();
         }
     });
 });

Démo ici

0
Sergio