How to write the code for moving selected elements in multiple <select> to another multiple <select>


#1

Hi,
i have this code for two multiple elements with movement buttons

    <select multiple size="10" class="form-control col-md-5" style="display:inline; width:38%; margin- 
      right:2%;">
      @foreach($citernes as $citerne)
        <option value="{{$citerne->numero_de_serie}}">{{$citerne->numero_de_serie}} || {{$citerne- 
        >fabricant}} || {{$citerne->fournisseure}} || {{$citerne->prix_achat}} || {{$citerne->capacité}}</option>
      @endforeach

    </select>

    <div class="btn-group-vertical col-md-2" style=" margin-bottom:20%">
        <button type="button" class="btn btn-success btn-space">></button>
        <button type="button" class="btn btn-danger btn-space"><</button>
        <button type="button" class="btn btn-success btn-space">>></button>
        <button type="button" class="btn btn-danger btn-space"><<</button>
      </div>

    <select multiple size="10" class="form-control col-md-5" style="float:right; width:38%;">

    </select>

here is a photo :

i want to write a code with vueJS to make the buttons move the multiple selected on the left to be moved to the write and vice versa .


#2

Doing it with a mix of PHP and JS will probably make things more difficult than it should be.

Your best option would be to write the array to the page as a couple of JSON arrays, then use a normal Vue instance / app to consume that data in its own data() function.

Then it’s just a case of using Vue (see tutorials) to move the data about based on the selected indices of the select element.

When you are done, you can submit to the server with AJAX.