Clear 2 fields of type select when filling in a certain input field

Question

Clear 2 fields of type select when filling in a certain input field

Navigation

#1 by (2 votes)

1

I need to clear the filled values of 2 fields of type select when filling a field of type input .

When I fill in the field input with name postcode I want the values of fields of type select with name country_id and zone_id to be cleared so that it is necessary to select them again. >

Here is my code:

<div class="form-group required">
    <input type="text" name="postcode" value="" placeholder="Coloque seu CEP" id="input-order-postcode" class="form-control" />
</div>
<div class="form-group required">
    <select name="country_id" id="input-order-country" class="form-control country-selector" data-post-code-required="#input-order-postcode" data-zone="#input-order-zone">
        <option value="" selected="selected"> --- Selecione o País --- </option>
        <option value="30">Brasil</option>
    </select>
</div>

<div class="form-group required">
    <select name="zone_id" id="input-order-zone" class="form-control">
        <option value="" data-sigla='' selected="selected"> --- Selecione o Estado --- </option>
        <option value="440" data-sigla='AC'>Acre</option>
        <option value="441" data-sigla='AL'>Alagoas</option>
        <option value="442" data-sigla='AP'>Amapá</option>
        <option value="443" data-sigla='AM'>Amazonas</option>
        <option value="444" data-sigla='BA'>Bahia</option>
        <option value="445" data-sigla='CE'>Ceará</option>
        <option value="446" data-sigla='DF'>Distrito Federal</option>
        <option value="447" data-sigla='ES'>Espírito Santo</option>
        <option value="448" data-sigla='GO'>Goiás</option>
        <option value="449" data-sigla='MA'>Maranhão</option>
        <option value="450" data-sigla='MT'>Mato Grosso</option>
        <option value="451" data-sigla='MS'>Mato Grosso do Sul</option>
        <option value="452" data-sigla='MG'>Minas Gerais</option>
        <option value="453" data-sigla='PA'>Pará</option>
        <option value="454" data-sigla='PB'>Paraíba</option>
        <option value="455" data-sigla='PR'>Paraná</option>
        <option value="456" data-sigla='PE'>Pernambuco</option>
        <option value="457" data-sigla='PI'>Piauí</option>
        <option value="458" data-sigla='RJ'>Rio de Janeiro</option>
        <option value="459" data-sigla='RN'>Rio Grande do Norte</option>
        <option value="460" data-sigla='RS'>Rio Grande do Sul</option>
        <option value="461" data-sigla='RO'>Rondônia</option>
        <option value="462" data-sigla='RR'>Roraima</option>
        <option value="463" data-sigla='SC'>Santa Catarina</option>
        <option value="464" data-sigla='SP'>São Paulo</option>
        <option value="465" data-sigla='SE'>Sergipe</option>
        <option value="466" data-sigla='TO'>Tocantins</option>
    </select>
</div>

javascript jquery

asked by anonymous 07.07.2016 / 16:20

1 answer

Get names of teams in different tables! Display date formatted in datagridview

score 2 · Accepted Answer

You can use this:

$('input#input-order-postcode').on('change', function() {
    if (this.value) $('select').val('');
});

This causes each change of the value of the input to simply check if it has value, and if it does, the selects return to the initial option.

Example: link

If you want to be more specific in events or selectors instead of respectively change and only select .