Hiding div when selecting default value from select dropdown using javascript

Question

I have made a select dropdown with a default value of "Choose location". Upon selecting any of the location, a hidden div for the Name of school will show up.Now, how would I automatically hide it when selecting again the "Choose location" from the first dropdown select?

page source

     
        
          
           
            
               Primary
            
               
               
School Location:




 Name Of School

****html****

    
       
          
             
              
               Primary
             

              
             
             School Location:
             
             

             
             Name Of School 
             
             
             



          
          
          
       
         SY Graduated: 
            {!! Form::hidden('sy', '', array('id' => 'sy_hidden')) !!}
               
        
           

            Select Grade Level:
            {!! Form::select('scholar_primary_grade', [
                                            ''=>'Choose a Year Level',
                                            '1' => 'Grade-1',
                                            '2' => 'Grade-2',
                                            '3' => 'Grade-3',
                                            '4' => 'Grade-4',
                                            '5' => 'Grade-5',
                                            '6' => 'Grade-6'
                                            ],NULL,['class'=>'form-control']) !!}
                                        
       
       Grade Point Average (GPA):
          {!! Form::text('scholar_primary_gpa',NULL,['class'=>'form-control','placeholder'=>'Enter Your Last Grade Point Average'])!!}
         
         
        Grade Picture:
       {!! Form::file('scholar_primary_grade_proof',['class'=>'form‐control','id'=>'scholar_primary_grade_proof'  ]) !!}
                   
        
        
                                        
                                    
                                 
     
      
     Award and Recognition:
      {!! Form::text('scholar_primary_awards',NULL,['class'=>'form-control','placeholder'=>'Enter Your Award and Recognition','data-role'=>'tagsinput'])!!}

******Script******

 $(document).ready(function(){
    var $cat = $('select[name=location_primary]'),
    $school = $('select[name=school_primary]');
var thisSelect = document.getElementById('selection');
    var selection = thisSelect.options[thisSelect.selectedIndex].innerHTML;
        if(selection == 'Choose location'){
                $('#showDiv').hide();
           }

         $cat.change(function(){
           if(selection == 'Choose location') {
                $('#showDiv').show();
           } 


           var $this = $(this).find(':selected'),
           rel = $this.attr('rel'),
           $set = $school.find('option.' + rel);

            if ($set.size() < 0) {
              $school.hide();
              return;
            }
      $school.show().find('option').hide();
      $set = $school.find('option.0, option.' + rel);
      $set.show().first().prop('selected', true);
  });
});

Junius L · Accepted Answer

Inside your $cat.change use this to get the current selected value, and hide and show div based on the current value.

$(document).ready(function(){
        var $cat = $('select[name=location_primary]'),
            $school = $('select[name=school_primary]');
        var thisSelect = document.getElementById('selection');
        var selection = thisSelect.options[thisSelect.selectedIndex].innerHTML;
        if(selection == 'Choose location'){
            $('#showDiv').hide();
        }

        $cat.change(function(){
            if($(this).find(":selected").text() == 'Choose location') {
                $('#showDiv').hide();
            }else {
                $('#showDiv').show();
            }


            var $this = $(this).find(':selected'),
                rel = $this.attr('rel'),
                $set = $school.find('option.' + rel);

            if ($set.size() < 0) {
                $school.hide();
                return;
            }
            $school.show().find('option').hide();
            $set = $school.find('option.0, option.' + rel);
            $set.show().first().prop('selected', true);
        });
    });





    Name Of School

Hiding div when selecting default value from select dropdown using javascript

Answers (2)

Related Questions