更改选择字段后如何清除输入类型的文本？

Question

我正在制作一个简单的注册系统，用户必须先选择州，然后再选择城市。 到现在为止还挺好。 我还创建了一个函数来指定两个州的城市具有不同的运输。

用户选择他所居住的州，然后输入城镇。 如果他选择了特定州，他就从SELECT FIELD中选择城市。 到目前为止也很好。

我想在每次更改选择#estado时清除输入#cidade。

到目前为止，我的JavaScript：

$(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();
    });
});

它的HTML。 它有点长：

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

我能做什么？

Answer 1

只需添加

$('#cidade').val('');

在estado的change事件处理程序的末尾

Answer 2

$(function() {
    $('#estado').change(function() {
        $('#cidade').val(""); // Should set the value to nothing.
    });
});

Answer 3

$(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();
});