Hide Elements Dynamically in Blade Foreach Loop

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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');
});

Method 2

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();
   }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x