Clear 2 fields of type select when filling a given input field

Asked

Viewed 51 times

1

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

When filling in the field input by name postcode i want the values of the fields of type select by name country_id and zone_id are cleaned so that it is necessary to select them again.

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

1 answer

2


You can use it like this:

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

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

Example: https://jsfiddle.net/3zL6c949/

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

  • You can specify only the 2 select?

  • @Wendell has it, you can use it ID and separate by commas like this: $('#input-order-zone, #input-order-country').val('');

  • Sergio, it worked. The only problem is that you need to click outside the input so that the fields select go back to the initial state. There would be some way this could be done without having to click outside the field?

  • 1

    @Wendell yes, I left a comment on that in the reply. There are different events you can use, for example $('input#input-order-postcode').on('change, input, keyup', function() {. So he listens to 3 events, but if you don’t need them all take some.

  • 1

    Wonderful! Just what you need, thank you.

Browser other questions tagged javascript jquery

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