5

Como consigo colocar um botão relacionado com o outro?

Exemplo:

<span class="IWLABEL10CSS" id="IWLABEL7">Distrito</span>
<select name="PAIS" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
 <option value="Indiferente">Indiferente</option>
 <option value="Portugal">PORTUGAL</option>
<option value="Brasil">BRASIL</option>
<option value="Espanha">ESPANHA</option>
</select>

e depois tenho outra opção que é os Concelhos.

<span class="IWLABEL7CSS" id="IWLABEL7">Concelho</span>
<select name="CIDADE" size="1" width="195" class="COMBOCONCCSS" id="COMBOFAB" tabindex="1">
 <option value="Indiferente">Indiferente</option>
     <option value="Lisboa">Lisboa</option>
     <option value="Porto">Porto</option>
     <option value="Madrid">Madrid</option>
     <option value="Barcelona">Barcelona</option>
     <option value="Brasilia">Brasilia</option>
     <option value="São Paulo">São Paulo</option>

Escolho ESPANHA na primeira opção PAIS e quero que apareça apenas Nas cidades BARCELONA, MADRID, etc.

8
  • 1
    Sera necessária o uso do javascript/jQuery Commented 27/03/2014 às 12:14
  • Com jQuery você consegue fazer isso.
    – GarouDan
    Commented 27/03/2014 às 12:16
  • e como se chama essa função em javascript?
    – ChrisAdler
    Commented 27/03/2014 às 12:18
  • Você precisaria de um arquivo json com todas os países e com cidades. e depois quando você seleciona-se o país você pegaria o selecionado e fazia a busca dentro do json para trazer as cidades referente ao país, mas acredito que seria grande demais para ser respondido aqui.. mas vou ver o que consigo pra você... aguarde... Commented 27/03/2014 às 12:21
  • E você já tem o código todo na página ou vai buscar via Ajax?
    – Sergio
    Commented 27/03/2014 às 12:43

2 Respostas 2

6

A sua pergunta é incompleta. Posso ajudar mais a explicar o que é preciso numa pergunta, ou próximas perguntas, para ser clara para quem quer ajudar. No Meta há de certeza uma pergunta referência mas não a encontro agora.

Ainda assim, fica aqui uma sugestão. Neste código em baixo mudei o seu ID duplicado para o segundo select. ID's têm de ser únicos, e já agora dá jeito ter um ID nesse select.

Adicionei um campo data-pais="" nas suas options. Assim, se todas estiverem no mesmo select dá para as mostrar/esconder.

<option data-pais="Portugal" value="Lisboa">Lisboa</option>
<option data-pais="Portugal" value="Porto">Porto</option>
<option data-pais="Espanha" value="Madrid">Madrid</option>

Acrescentei também CSS, aqui pode optar por retirar este código completamente se quiser que todas as opções estejam disponíveis.

#COMBOCID option{
    display: none;
}

jQuery

$('select[name="PAIS"]').on('change', function(){
    var pais = this.value;
    $('select[name="CIDADE"] option').each(function(){
        var $this = $(this);
        if($this.data('pais') == pais) $this.show();
        else $this.hide();
    });
});

Exemplo: http://jsfiddle.net/XH42p/

1
-2

Acho que daria pra você usar esse script

<select name="odin" id="odin" onchange="turnTo(this)">
        <option value="Vaca">Vaca</option>
        <option value="Boi">Boi</option>
        <option value="Ovelha">Ovelha</option>
    </select>
    <select name="thor" id="thor">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
        function turnTo(source){
            var slc = document.getElementById(source.id);
            var opcaoTexto = slc.options[slc.selectedIndex].text;
            var opcaoValor = slc.options[slc.selectedIndex].value;
            console.log(opcaoValor + "\n" + opcaoTexto);

            var scdSelect = document.getElementById('thor');
            var vlOption = scdSelect.options[scdSelect.selectedIndex].value = opcaoValor;
            var vlTextOption = scdSelect.options[scdSelect.selectedIndex].text = opcaoValor;
            console.log(vlOption + "\n" + vlTextOption);
        }        
    </script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .