0

I'm having a problem with a Jquery plugin called multiselect, or I don't know if it isn't fully compatible with laravel, but the system I'm currently doing needs to have a multiselect function on the selects, I'm calling the records from the database with a foreach loop, this jquery function calls through the Id of the HTML tag, inside the id of the select I placed the call for the database records like this:

<select multiple="multiple" class="form-control" id="{{$user->id_user}}" name="user_id">

The id then is going to be called by the jquery function:

$(function () {

  $("#{{$user->user_id}}").multiselect();

});

There's a button that displays a form with the function of editing the records, inside a table that's looped to show all the data, inside said form there's a select with that I desire to have the multiselect function to not only pick one option but rather several options. My problem is that this jquery function is only functioning in one of the forms to edit (the one that corresponds to the last record of the database), and the others it fails, or simply doesn't work as intended. If you need the complete code here it is:

 <?php foreach ($combos as $user): ?>
            <tr>
              <td scope="row">{{$user->user_id}}</td>
              <td>{{$user->name}}</td>                 
              <td>{{$user->desc}}</td>
              <td><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample{{$user->user_id}}" aria-expanded="false" aria-controls="collapseExample">edit</button>
              <div class="collapse" id="collapseExample{{$user->user_id}}">
  <div class="card card-body">
                <form action="{{ url('update') }}" method="post">
                  {{method_field('PUT')}}
                  {{csrf_field()}}
              <div class="form-group">
                 <label for="">Name</label>
                 <input required type="text" name="name" class="form-control" aria-describedby="helpId" readonly value="{{$user->name}}">
                 <small id="helpId" class="text-muted">Pepito Peres</small>
               </div>
               <div class="form-group">
                 <label for="">desc</label>
                 <input required type="text" name="desc" class="form-control" aria-describedby="helpId" readonly value="{{$user->desc}}">
                 <small id="helpId" class="text-muted"></small>
              </div>
              <div class="form-group">
                <label for="">code</label>
                <select multiple="multiple" class="form-control" id="{{$user->user_id}}" name="user_id" >
                <option value="">select options</option>
                 <?php foreach ($products as $user) { ?>
                <option value="{{$user->name}}">{{$user->name}}</option>
                 <?php } ?>
                 </select>

Hopefully someone can help me with my issue, sorry if I mispelled some words, english is not my first language. I can also share an image, where it shows the issue more clearly:

The problem in question

  • IDs must be unique or they don't identify anything. It's invalid HTML to reuse them. One remedy is to convert them to a class or a data attribute and select for that. – isherwood Jun 09 '22 at 19:22

1 Answers1

0

I was able to solve it. Looking at the documentation of multiselect jquery plugin, I saw that I was able to use the function so it targets all the select elements on the document instead of just targeting a single ID:

$(function () {

  $("select").multiselect();

});
isherwood
  • 58,414
  • 16
  • 114
  • 157