1

私は、ユーザーが都市を選択する前に、まず州を選択する必要がある単純な登録システムを作成しています。ここまでは順調ですね。また、配送が異なる都市を持つ2つの州を指定する関数を作成しました。

ユーザーは自分が住んでいる州を選択し、町を入力します。彼が特定の州を選択した場合、彼はSELECTFIELDから都市を選択します。これまでのところあまりにも良い。

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

私に何ができる？

4

3 に答える 3

0

追加するだけ

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

の変更イベントハンドラの最後にestado

于 2012-11-09T15:31:02.670 に答える
0 
$(function() {
    $('#estado').change(function() {
        $('#cidade').val(""); // Should set the value to nothing.
    });
});
于 2012-11-09T15:31:41.203 に答える
0 
$(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();
});
于 2012-11-09T15:32:32.157 に答える