Hide Elements Dynamically in Blade Foreach Loop-CodePudding

I have a form in Laravel Blade which contains data that need to be hidden and shown dynamically. Here is the code.

@foreach ($working_orders as $key => $order)
      <div class="col-lg-12 row ">
          <div class="title-md">Work Order # {{$order->id}}</div>
              <div class="form-group col-lg-6">
                  <label style="color: #44484d;">Camión</label>
                  <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields()">
                      <option value="1" selected>No asignar</option>
                      <option value="2">Asignar empresa de logística</option>
                  </select>
              </div>
          </div>
          <div class="form-group col-lg-6 assigner_div">
              <label style="color: #44484d;">Assigner</label>
              <div class="input-group">
                  <select class="form-control kt-selectpicker" required name="truck_assigner"> 
                     <option selected="" disabled>❗</option>
                     @foreach ($truck_assigners as $truck_assigner)
                         <option> {{ $truck_assigner->staffs->name }}</option>
                     @endforeach
                    </select>
               </div>
           </div>
       </div>
@endforeach

and jQuery

function getOrderFields() 
{
    if ($(".truck_type :selected").val() == '2') 
    {
        $('.assigner_div').show();
    }
    if ($(".truck_type :selected").val() == '1') 
    {
        $('.assigner_div').hide();
    }
}

This code hides and shows the fields but issue is I am using classes so All elements in foreach loop has same class and it hides/shows all of the fields. For example: I have two keys in array given to foreach loop. So I changes field in key 0 of loop it hides div in both of keys that is 2nd key. I need to hide/show fields for selected order not all. What is the solution to this problem?

CodePudding user response：

You can use the $key in foreach loop to accomplish the given task. Pass the $key to the getOrderFields function and change the class name according to the $key as well. Following is the changed code segments according to your problem.

...
  <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields({{ $key }})">
...
  <div class="form-group col-lg-6 assigner_div_{{ $key }}">
...

In script,

function getOrderFields(key) {
   if ($(".truck_type :selected").val() == '2') {
      $('.assigner_div_'   key).show();
   }
   if ($(".truck_type :selected").val() == '1') {
      $('.assigner_div_'   key).hide();
   }
}

CodePudding user response：

DEMO

I'd consider changing the event handler to be set using jQuery rather than using the onchange attribute. Then you can combine DOM Traversal methods with the $(this) selector to do what you're looking for. Rough Example:

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).parents('.row').children('.assigner_div');
    assigner.toggle(val === '2');
});

In this example we used the parents, and children methods. There are many different methods that could be used though. For instance the next method:

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).parents('.title-md').next();
    assigner.toggle(val === '2');
});

There are also the find, and closest methods:

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).closest('.row').find('.assigner_div');
    assigner.toggle(val === '2');
});