Ordering/moving option tag of a dropdown menu by city district and route

user_19192463 0
Viewed 52

Hi i have problem with drop down menu. I already remove duplicates now i want to put the route and district under the city. Since the dropdown is dynamic i use php from the database for filling it and i was thiking to use js for moving the option tag. This is my dropdown ask me if u need else :) enter image description here

enter image description here

enter code here
`<select class="select form-control filter-advertisement-show"
                        id="annuncio_id" name="annuncio_id" onchange="searchFilter2()" style="float: right; box-shadow: none;">
                    <option selected disabled hidden >{{__("Filtro per annunci")}}</option>
                    <option value="all"> {{ __('Tutti gli annunci') }} </option>
                    @foreach ($advertisements_with_packages as $advertisement)
                        @php
                            $district = $advertisement->address->district;
                            $locality = $advertisement->address->locality;
                        @endphp
                        <option style= "font-weight: bold;" data-order="1" id="citta" class="level_0 d-flex"value="@php $locality = str_replace(' ', '', $locality); echo $locality @endphp">@php echo $advertisement->address->locality @endphp</option>
                        <option style="margin-left: 20px; font-weight: bold;" data-order="2"  id="{{$advertisement->id}}" class="level_1" value="@php $district = str_replace(' ', '', $district); echo $district @endphp" data-id="@php $locality = str_replace(' ', '', $locality); echo $locality @endphp">@php echo  $advertisement->address->district @endphp</option>
                        <option style="margin-left: 20px;" data-order="3" id="route" class="level_2" value="{{$advertisement->id}}">{{$advertisement->address->route}}  {{$advertisement->address->street_number}}</option>
                        <script> 
                   /* (".selecet .option").each(function() {
                        $(this).siblings('[value="' + this.value + '"]').remove();
                    });*/
                    var optionValues =[];
                    $('#annuncio_id option').each(function(){
                        if($.inArray(this.value, optionValues) >-1){
                            $(this).remove()
                        }else{
                            optionValues.push(this.value)
                        }});
                </script>
                    <script>
                    let container =  document.getElementById("{{$advertisement->id}}");
                    let distretto = document.getElementById("{{$advertisement->id}}");
                    let strada = document.getElementById("route").value;
                    let option = document.createElement("option");
                        if(distretto === strada)
                            option.text = "fdgsfdgfdsgfds";
                            option.value = "sss"
                        container.add(option);
                    </script>`
laravel php javascript
1 Answers

This is an example. Please adjust this code according to your current situation. Js values mentioned in my example are not accurate and of course you know better your variables better than me. And you can add @php @foreach inside append (option) as you added in your question if necessary.

View:

<select class="select form-control filter-advertisement-show"
   id="annuncio_id" name="annuncio_id" style="float: right; box-shadow: none;">        
</select>

JS in view:

<script>
$(document).ready(function () {
$("#annuncio_id").on('change', function(){
         var annuncio = this.value;
            
            $("#annuncio_id").html('');
            
            $.ajax({
                    url: "{{url('/api/annuncio')}}",
                    type: "POST",
                    data: {
                        annuncio_id: annuncio,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',                 
                    success: function (result) {                        
                        $.each(result.annuncio, function (key, value) {                                                         
                      $("#annuncio").append('<option style= "font-weight: bold;" data-order="1" id="citta" class="level_0 d-flex" value="' + value.address + '">' + value.address + '</option> <option style="margin-left: 20px; font-weight: bold;" data-order="2"  id="' + value.id + '" class="level_1" value="' + value.district + '">' + value.district + '</option> <option style="margin-left: 20px;" data-order="3" id="route" class="level_2" value="' + value.route + '">' + value.route + '</option>');
                    });                                           
                     }
                 });
              });  
           });      
</script>

Controller:

public function getAnnuncio(Request $request) {
  if($request->has('annuncio_id')) {
  $data['annuncio'] = AnnuncioModel::where('id', $request->annuncio_id)->orderBy('id', 'DESC')->get();

return response()->json($data);
 }
}

Route:

use App\Http\Controllers\AnnuncioController;
Route::post('api/annuncio', [AnnuncioController::class, 'getAnnuncio']);
user_149035140
Related