Jquery - Trying to clear a select

Asked

Viewed 529 times

2

I have two dropdowns (select in html) one of UF and one of cities, when selecting a state I want to trigger a function to fill the dropdown of cities, receiving the state id as parameter. It is bringing all cities of the selected state and removing cities from the previous state correctly, the problem is that previously selected city remains selected when changing state. I’m stuck with version 1.11 of Jquery, if it has any influence... I’ve tried it both by Jquery itself and by pure javascript.

     <div class="ui-grid-a">
        <div class="ui-block-a uf">
               <label for="cpEstado" class="select">
                     <select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
                          <option value="" disabled selected>UF</option>
                      </select>
               </label>
        </div>
        <div class="ui-block-b cidade">
               <label for="cpCidade" class="select">
                      <select name="cidade" id="cpCidade" data-theme="c">
                          <option value="1" disabled selected>Cidade</option>
                      </select>
               </label>
       </div>

This is the html code where the selects are

$(document).on('change', '#cpEstado', function() {
            //document.getElementById("cpCidade").innerHTML = "<option id='padrao' disabled>Cidade</option>";
            //$('#cpCidade').get(0).selectedIndex = 0;
            $('#cpCidade').empty();
            appUsuario.buscarCidades( this.value );});

Here is the jquery function I used to fill out cpCidade.

I tried to change the value of the selected item, and it’s like this now:

Ele muda

It changes the text of the item but not in the selected part

javascript html jquery

  • Okay, and where’s the code so we can analyze it and help you? Read this post to help you succeed with your https://answall.com/help/mcvequestions

  • I don’t understand Ele está trazendo todas as cidades do estado selecionado e removendo as cidades do estado anterior corretamente if you are removing cities from the previous state how can the previous city be selected? It had not been removed when changing the state?

  • With the code posted there is no way to perform tests. If you can, put the functional code.

1 answer

0

I imagine you have already cleaned the options list and updated with the new city result from the selected UF, done this remove any "Selected" attribute from all options of the select of cities, then add the attribute "Selected" in the desired option as in the example below.

//remove o atributo que mantem selecionado qualquer select
jQuery("#cpCidade option").removeAttr("selected");

//defino o index do select que desejo selecionar
var indexSelect = 2;

//adiciono o atributo selected ao option que desejo seleciona a partir do index 
jQuery("#cpCidade option").eq(indexSelect).attr("selected","selected");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ui-grid-a">
        <div class="ui-block-a uf">
               <label for="cpEstado" class="select">
                     <select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
                          <option value="" disabled selected>UF</option>
                      </select>
               </label>
        </div>
        <div class="ui-block-b cidade">
               <label for="cpCidade" class="select">
                      <select name="cidade" id="cpCidade" data-theme="c">
                          <option value="1">Cidade</option>
                          <option value="2" selected>Cidade 2</option>
                          <option value="3">Cidade 3</option>
                      </select>
               </label>
       </div>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.