lundi 22 mai 2017

Check value dropdown select using change function in javascript

I have a script that hides a div tag with id=showDiv for Name of School .During the first load,the default value of select of School location is "Choose location" and I set it to hide.Upon changing or selecting option from School location, the div for Name of School will show.What if I will change the select of School location back to "Choose location"?It suppose to hide it back.How can I hide the div again?

HTML- just some part of it

<div class="col-lg-3">
   <div class="form-group">
     <label class="control-label">School Location:</label>
     <select name="location_primary" class="form-control" id="selection">
       <option>Choose location</option>
         @foreach($locations as $location)
          <option  value="{!! $location->location_id!!}" rel="{!! $location->location_id!!}">{!! $location->location_name!!}</option>
          @endforeach
        </select>
      </div>
   <div class="form-group" id="showDiv">
  <label class="control-label">Name Of School </label>
  <button class=" add_field_button_primary btn-primary">+</button>
   <select name="school_primary" class="form-control " style="display: none;">
   <option  class="0">Choose school</option>
      @foreach($schol as $school)
      <option  value="{!! $school->school_id !!}" class="{!! $school->location_id!!}">{!! $school->school_name!!}</option>
      @endforeach
      </select>
      </div>
   <div class="input_fields_view_primary">
     </div>
   </div> 

    ---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(){
                alert(selection);
               if(selection == 'Choose location') {
                    alert('true');
                    $('#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);


      });
    });



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire