How to clean the combo box field with AXIOS?

0

Context Home Items are loaded from the selected template, but items are accumulating when a new template is selected.
DoubtHomeHowtoclearcomboboxdatawhenanothertemplateisselected?Becausetheitemdataisaccumulatinginthesecondcombobox.

Modelcode:edita.blade.phppage

<!--IniciodomodaldeGerarChecklist--><divclass="modal fade modal-default" id="modalGerarChecklist" aria-hidden="true" aria-labelledby="examplePositionCenter"
                 role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title">Gerar Checklists</h4>
                        </div>
                        <div class="modal-body">
                        <div class="form-group col-md-18">
                             <input type="hidden" id="idProjeto" name="idProjeto" value="{{$projeto->id}}">
                             <label class="control-label">Modelos</label>
                            <select class="form-control" id="idModelo" name="idModelo"  required>
                                <option value="">Selecione</option>
                                @foreach($checklistsModelos as $checklistModelo)
                                    <option value="{{$checklistModelo->id}}" {{old('checklistModelo') == $checklistModelo->id ? 'selected' : ''}}>{{$checklistModelo->modelo}}</option>
                                @endforeach
                            </select> 
                            <br/>
                           <label class="control-label">Itens</label>
                            <select class="form-control" id="comboItens" name="comboItens[]"  multiple="multiple" disabled>
                            </select> 

                         </div>

                        </div><!--Fim do modal-body-->

                        <div class="modal-footer">
                        <center>
                            <a id="btnGerarChecklist" type="button" class="btn btn-primary gerarChecklist" data-dismiss="modal"  align="center" style="width: 300px; height: 40px">Gerar</a>
                        </center>
                        </div>
                    </div>
                </div>
            </div>
  <!--Fim do modal de Gerar Checklist--> 


Axios file: project-generateChecklist.js

jQuery("#idModelo").change(function() {

        let idModelo = $( "#idModelo option:selected" ).val();

        axios.get('/projetos/comboItens/' + idModelo)
        .then(response => {
        // Super importante debugar o retorno....
        console.log(response)

        response.data.forEach((element, index, array) => {
        console.log(element)

        jQuery("#comboItens").append('
        <option value="${element.id}">
        ${element.descricao_item}
        <option/>
        ');
        });
        })
        .catch(() => {
        console.log('error...')
        console.log('idModelo = '+ idModelo);
        })

    })


Method comboItens () of class ProjectController.php:

 public function comboItens($id)
  {
    $checklistEstrutura = DB::table('checklist_estrutura')
    ->join('checklist_itens', 'checklist_estrutura.itens_id', '=', 'checklist_itens.id')
    ->where('checklist_estrutura.modelo_id', '=', $id)
    ->select('checklist_itens.id', 'checklist_itens.descricao_item')
    ->get(); 

     $checklistEstruturaArray = (array)  array_values($checklistEstrutura->toArray()) ; 




   return response()->json($checklistEstruturaArray);

  }
    
asked by anonymous 22.10.2018 / 19:12

1 answer

0

I used the following function in the file containing the axios (project-generateChecklist.js)

  

jQuery ("# comboItens").

Code:

jQuery("#idModelo").change(function() {

        let idModelo = $( "#idModelo option:selected" ).val();

        jQuery("#comboItens").empty();
        axios.get('/projetos/comboItens/' + idModelo)
        .then(response => {
        // Super importante debugar o retorno....
        console.log(response)

        response.data.forEach((element, index, array) => {
        console.log(element)


        jQuery("#comboItens").append('
        <option value="${element.id}">
        ${element.descricao_item}
        <option/>
        ');
        });
        })
        .catch(() => {
        console.log('error...')
        console.log('idModelo = '+ idModelo);
        })

    })
    
22.10.2018 / 20:18