show hide div based on dropdown selection

this select options {!! Form::select('team_id',$teamlist,null,['class' => 'form-control select2']) !!} returned the following list

    Team 1
Team 2
    Team 3
    Team 4

but want that when i select team 2 then it show/hide another field input select option in order to select another option as well

Some one can help me.

jeevamugunthan

5 years ago

Level 2

you need to use onchange function jquery , for example

<select class="form-control" name="type" id="type" onchange="typeofdate()" required>
              <option selected value="">Select data type</option>
              <option value="1">First Level Contacts</option>
              <option value="2">Social Distance</option>
              <option value="3">Crowed Location</option>
              <option value="4">Restricted Location</option>
            </select>

<script>
      $("#toshow").hide();   //which element you want to hide or show
          function typeofdate(){
        var type =$("#type").val();

        if(type == 2 || type == 3){
          $("#toshow").show();
        }else{
          $("#toshow").hide();
        }

      }
</script>

melx

5 years ago

Level 4

@jeevamugunthan , how can i know the value ? type=2 ? as per my code below

melx

5 years ago

Level 4

@jeevamugunthan , but am using Html Package

{!! Form::select('team_id',$teamlist,null,['class' => 'form-control select2']) !!}

or am using like this

                 <div class="form-group">
          <label>Team</label>
          <select  name="team_id" class="form-control select2"  data-placeholder="Select a Team" id="team_id"
          style="width: 100%;">
          <option>[SELECT]</option>
        @foreach($teamlist as $key=>$type)
       <option value="{{$key}}">{{$type}}</option>
        @endforeach
        </select>
      </div>

how can apply on change here

jeevamugunthan

5 years ago

Level 2

@emfinanga in type == 2 2 is the value of selected option

jeevamugunthan

5 years ago

Level 2

<div class="form-group">
          <label>Team</label>
          <select  name="team_id" class="form-control select2"  data-placeholder="Select a Team" id="team_id"
          style="width: 100%;" onchange="change_type()">
          <option>[SELECT]</option>
        @foreach($teamlist as $key=>$type)
       <option value="{{$key}}">{{$type}}</option>
        @endforeach
        </select>
      </div>

<script>
function change_type(){
      $("#toshow").hide();   //which element you want to hide or show
          function typeofdate(){
        var type =$("#team_id").val();

        if(type == 2 || type == 3){
          $("#toshow").show();
        }else{
          $("#toshow").hide();
        }

      }
}
</script>

Please or to participate in this conversation.