Question

I’m making a simple registration system, where the user must first select the state, before selecting the city. So far so good. I also created a function to specify two states that have cities with different shipping.

The user selects the state where he lives, then input the town. If he select the specific state, the he chooses the city from a SELECT FIELD. So far so good too.

I want to clear the input #cidade every time I change the select #estado.

My javascript so far:

$(function() {
    $('#estado').change(function() {
        var typeSelected = $(this).val();
        if (typeSelected == "0") {
            $('#cidade').hide();
            $('#santacatarina').hide();
            $('#parana').hide();
        }
        else if (typeSelected == "Santa Catarina") {
            $('#cidade').hide();
            $('#santacatarina').show();
            $('#parana').hide();
        }
        else if (typeSelected == "Paraná") {
            $('#cidade').hide();
            $('#santacatarina').hide();
            $('#parana').show();
        }
        else{
            $('#cidade').show();
            $('#santacatarina').hide();
            $('#parana').hide();
        }
    }).change();
});
$(function() {
    $('#cidadesSC').change(function() {
        var typeSelected = $(this).val();
        if (typeSelected == "0") {
            $('#outraCidadeSC').hide();
        }
        else if (typeSelected == "Outra Cidade") {
            $('#outraCidadeSC').show();
        }
        else{
            $('#outraCidadeSC').hide();
        }
    }).change();
});
$(function() {
    $('#cidadesPR').change(function() {
        var typeSelected = $(this).val();
        if (typeSelected == "0") {
            $('#outraCidadePR').hide();
        }
        else if (typeSelected == "Outra Cidade") {
            $('#outraCidadePR').show();
        }
        else{
            $('#outraCidadePR').hide();
        }
    }).change();
});
//here is the function I've been trying to do the clear of #cidade
$(function() {
    $('#estado').change(function() {
        $('#cidade').clear();
    });
});

The HTML for it. It is a bit longer:

<select id="estado" name="estado">
    <option value="0">Selecione</option>
    <option value="Acre">Acre</option>
    <option value="Alagoas">Alagoas</option>
    <option value="Amazonas">Amazonas</option>
    <option value="Amapá">Amapá</option>
    <option value="Bahia">Bahia</option>
    <option value="Ceará">Ceará</option>
    <option value="Distrito Federal">Distrito Federal</option>
    <option value="Espírito Santo">Espírito Santo</option>
    <option value="Goiás">Goiás</option>
    <option value="Maranhão">Maranhão</option>
    <option value="Minas Gerais">Minas Gerais</option>
    <option value="Mato Grosso">Mato Grosso</option>
    <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
    <option value="Pará">Pará</option>
    <option value="Paraíba">Paraíba</option>
    <option value="Paraná">Paraná</option>
    <option value="Pernambuco">Pernambuco</option>
    <option value="Piauí">Piauí</option>
    <option value="Rio de Janeiro">Rio de Janeiro</option>
    <option value="Rio Grande do Norte">Rio Grande do Norte</option>
    <option value="Rio Grande do Sul">Rio Grande do Sul</option>
    <option value="Rondonia">Rondonia</option>
    <option value="Roraima">Roraima</option>
    <option value="Santa Catarina">Santa Catarina</option>
    <option value="Sergipe">Sergipe</option>
    <option value="São Paulo">São Paulo</option>
    <option value="Tocantins">Tocantins</option>
</select>
<input id="cidade" type="text" style="display:none; border:2px solid blue;">

<div style="clear:both;"></div>

<div id="santacatarina" style="display:none;">
    <select id="cidadesSC" name="cidadesSC">
        <option value="0">Selecione</option>
        <option value="Araquari">Araquaria</option>
        <option value="Balneário Camboriú">Balneário Camboriú</option>
        <option value="Barra Velha">Barra Velha</option>
        <option value="Biguaçu">Biguaçu</option>
        <option value="Blumenau">Blumenau</option>
        <option value="Bombinhas">Bombinhas</option>
        <option value="Brusque">Brusque</option>
        <option value="Camboriú">Camboriú</option>
        <option value="Florianópolis">Florianópolis</option>
        <option value="Garuva">Garuva</option>
        <option value="Gaspar">Gaspar</option>
        <option value="Governador Celso Ramos">Governador Celso Ramos</option>
        <option value="Ilhota">Ilhota</option>
        <option value="Indaial">Indaial</option>
        <option value="Itajaí">Itajaí</option>
        <option value="Itapema">Itapema</option>
        <option value="Itapoá">Itapoá</option>
        <option value="Jaraguá do Sul">Jaraguá do Sul</option>
        <option value="Joinville">Joinville</option>
        <option value="Luiz Alves">Luiz Alves</option>
        <option value="Navegantes">Navegantes</option>
        <option value="Palhoça">Palhoça</option>
        <option value="Penha">Penha</option>
        <option value="Piçarras">Piçarras</option>
        <option value="Pomerode">Pomerode</option>
        <option value="Porto Belo">Porto Belo</option>
        <option value="São Francisco do Sul">São Francisco do Sul</option>
        <option value="São José">São José</option>
        <option value="Schroeder">Schroeder</option>
        <option value="Tijucas">Tijucas</option>
        <option value="Timbó">Timbó</option>
        <option value="Outra Cidade">Outra Cidade</option>
    </select>
    <p style="float:right;">Santa Catarina possuí cidades com <a href="#">Frete Grátis</a></p>
    <input id="outraCidadeSC" type="text" style="display:none; border:2px solid red;">
</div>

<div id="parana" style="display:none;">
    <select id="cidadesPR" name="cidadesPR">
        <option value="0">Selecione</option>
        <option value="Curitiba">Curitiba</option>
        <option value="Outra Cidade">Outra Cidade</option>
    </select>
    <p style="float:right;">Paraná possuí cidades com <a href="#">Frete Grátis</a></p>
    <input id="outraCidadePR" type="text" style="display:none; border:2px solid green;">
</div>

What can I do?

Answer 1

$(function() {
$('#estado').change(function() {
    $('#cidade').val('');  // empty the #cidade
    var typeSelected = $(this).val();
    if (typeSelected == "0") {
        $('#cidade').hide();
        $('#santacatarina').hide();
        $('#parana').hide();
    }
    else if (typeSelected == "Santa Catarina") {
        $('#cidade').hide();
        $('#santacatarina').show();
        $('#parana').hide();
    }
    else if (typeSelected == "Paraná") {
        $('#cidade').hide();
        $('#santacatarina').hide();
        $('#parana').show();
    }
    else{
        $('#cidade').show();
        $('#santacatarina').hide();
        $('#parana').hide();
    }
}).change();
});