jQuery select change show/hide div event

Question

I am trying to create a form which when the select element 'parcel' is selected it will show a div but when it is not selected I would like to hide the div. Here is my markup at the moment:

This is my HTML so far..

    <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>

This is my jQuery so far..

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

score 47 · Accepted Answer · answered Sep 02 '13 at 11:49

Use following JQuery. Demo

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

score 3 · Answer 2 · answered Sep 02 '13 at 11:43

3

Try:

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

Or even:

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

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

answered Sep 02 '13 at 11:43

Ivan Chernykh

41,617
13
134
146

jQuery pseudo selectors are not the appropriate interface for checking form values. – i_like_robots Sep 02 '13 at 11:44
1

@i_like_robots is it bad for performance? is it less readable? or just not in fashion ? – Ivan Chernykh Sep 02 '13 at 11:48
The performance of pseudo-selectors is pretty poor - it's a lot of hoops to jump through - but selectors are really for traversing DOM objects and there are specific interfaces for checking form input values. – i_like_robots Sep 02 '13 at 11:52
@i_like_robots i agree , and i see all of them in the other answers.. so i give some not trivial alternative ;) – Ivan Chernykh Sep 02 '13 at 11:54
Here are a few loosely connected test cases comparing jQuery pseudo-selectors vs. alternative interfaces: http://jsperf.com/eq-pseudo-selector-and-reduce-performance/2 http://jsperf.com/animated-pseudo-selector/3 http://jsperf.com/jquery-fastest-neq-filter – i_like_robots Sep 02 '13 at 11:56
@i_like_robots thanks , good to know that `$items.filter(function(i)` (Custom filter) is actually faster than it looks – Ivan Chernykh Sep 02 '13 at 11:59

score 1 · Answer 3 · answered Sep 02 '13 at 11:44

change your jquery method to

$(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
    });
});

score 1 · Answer 4 · answered Aug 01 '17 at 09:09

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

Do like this for every value Also change the values... as per your parameters

score 0 · Answer 5 · answered Sep 02 '13 at 11:43

0

Try the below JS

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

answered Sep 02 '13 at 11:43

Saranya Sadhasivam

1,296
6
9

score 0 · Answer 6 · answered Sep 02 '13 at 11:43

0

Try this:

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

answered Sep 02 '13 at 11:43

Cthulhu

1,379
1
13
25

score 0 · Answer 7 · answered Sep 02 '13 at 11:46

Try this:

 $(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();
         }
     });
 });

Demo here

score 0 · Answer 8 · answered Sep 02 '13 at 11:49

Nothing new but caching your jQuery collections will have a small perf boost

$(function() {

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

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

And in vanilla JS for super speed:

(function() {

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

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

});

score 0 · Answer 9 · edited Oct 21 '17 at 12:43

I used the following jQuery-based snippet to have a select-element show a div-element that has an id that matches the value of the option-element while hiding the divs that do not match. Not sure that it's the best way, but it is a way.

$('#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>

pranay_lamse · Answer 10 · 2022-06-20T06:36:58.567

<div class="col-md-12">
    <div class="col-md-4">
      <label class="form-control" >Pay Mode</label>
         <select id="pay_mode2" class="btn-default form-control ">
            <option value="cheque">Cheque</option>
            <option value="cash" selected>Cash</option>
        </select>
    </div>
    <div class="col-md-4 cheque">
      <label class="form-control" >Cancelled</label>
         <select class="btn-default form-control ">
            <option value="no">No</option>
            <option value="yes">Yes</option>
        </select>
    </div>
    <div class="col-md-4 cheque">
      <label class="form-control" >Instrument No</label>
        <input type="text" class="form-control" name="">
    </div>
</div>


<script>
  $('#pay_mode2').change(function(){
  var myID = $(this).val();
 if(myID == 'cheque')
 {
  $('.cheque').each(function(){
      $(this).show();
  });
 }else{
  $('.cheque').each(function(){
      $(this).hide();
  });
 }
});

</script>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 20 '22 at 11:22

jQuery select change show/hide div event

10 Answers10

Demo here

Linked

Related