CODEWITHSUNDEEP
javascriptjqueryhtml
lucas rs
lucas rs

Reputation: 13

Trying to clear a select

I have two dropdowns (select in HTML), when I select the option in the first dropdown it has to fill the second according to the id of the selected item of the first. It's doing well at removing all the previous options and filling with the id selected in the first dropdown, however it's not removing the text appearing as selected. I'm stuck at the version 1.11 of Jquery if it matters somehow. I've tried doing this both through Jquery and Javascript.

Here is the html code where the selects are:

<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>

Here is the Jquery function I used to fill the second dropdown:

$(document).on('change', '#cpEstado', function() {
    $('#cpCidade').empty();
    appUsuario.buscarCidades( this.value );});

When I changed the text of the selected text,

$("#cpCidade option:selected").html('Mudança de valor');

This happened. It changes the text of the item in the dropdown but not in the selected item:

Upvotes: 0

Views: 84

Answers (1)

Marlon Allan Supetran
Marlon Allan Supetran

Reputation: 473

You should be setting the value of the second dropdown (instead of setting the html content of the selected option):

$("#cpCidade").val('{id}');

Where id = the value of 'Mudança de valor'

Upvotes: 2

Related Questions