CODEWITHSUNDEEP
javascriptjqueryhtmlvalidationhtml-select
vytfla
vytfla

Reputation: 559

jQuery show/hide div based on select option

So I know this has been asked a bunch and I've cycled through several posts and have done, it seems, exactly what has been said, but can't get it to work. You can see my page here.

Essentially I want to show a div and make its inputs/selects required (once shown; if hidden, they are not required). Obviously the div should show/hide depending on the selection.

$('#table-meals, .product-addon-please-choose-your-meal').hide();

$('#purchase').change(function(){
      if($(this).val()=="Individual") {
        $('#table-meals').show();
        $('select').prop('required',true);
      }

      if($(this).val()=="Table of 10") {
        $('.product-addon-please-choose-your-meal').show();
        $('input').prop('required',true);
      }
  });

Upvotes: 0

Views: 1574

Answers (3)

vytfla
vytfla

Reputation: 559

I figured it out, instead of using $('#purchase').change(function(){ I need to use $('form').on('change', '#purchase', function(){

Upvotes: 1

Saif
Saif

Reputation: 2689

Based on dropdown list selection 

 jQuery(function () {
    $("select").change(function () {

        $(this).find("option:selected").each(function () {

            window.onunload = unloadPage;
            function unloadPage(){
                $('#dropdown').find('option:first').attr('selected', 'selected');
            }
             if ($(this).attr("value") == "user") {

                $(".box").not(".user").hide();
                $(".user").fadeIn(3000);
            }
            else if ($(this).attr("value") == "group") {

                $(".box").not(".group").hide();
                $(".group").fadeIn(3000);
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

   <div class="col-sm-12" >
     <select class="selectpicker" id="dropdown">
        <option value="default" selected="selected">Select Module..</option>
        <option value="group">Group Management</option>
        <option value="user">User Management</option>
	</select>
    </div>
                       
       <div class="group box" style="display:none">
            <h4>Group Management</h4>
             <p>Div 2.</p>
       </div>
       <div class="user box" style="display:none">
             <h4>User Management</h4>  
        </div>

Upvotes: 0

Matt
Matt

Reputation: 1580

The following code does work for me on your test page.

It looks like you had the individual/table of 10 elements mixed up.

// Using jQuery instead of $ because it looks like there's some sort of conflict on the site
jQuery('#purchase').change(function(){
    // Reset required fields and hide fields
    jQuery('select, input').prop('required', false);
    jQuery('#table-meals, .product-addon-please-choose-your-meal').hide();

    if(jQuery(this).val() == "Individual") {
        jQuery('.product-addon-please-choose-your-meal').show();
        jQuery('input').prop('required', true);
    }

    if(jQuery(this).val() == "Table of 10") {
        jQuery('#table-meals').show();
        jQuery('select').prop('required', true);
    }

});

Upvotes: 0

Related Questions