Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Select filtra outro select

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Tempo
  • Show
Clear All
new posts
Anterior template Avançar
  • Font Size
    #1

    Duvida Select filtra outro select

    Galera.. estou com uma dúvida cruel...
    começei estudar JS a pouco tempo e não entendo muito do assunto...
    Estou precisando fazer uma lista com estados e cidades... são 2 selects...

    Exemplo:
    Código HTML:
    <select name="estados">
   <option value=""></option>
   <option value="1">SP</option>
   <option value="2">RJ</option>
</select>

<br>

<select name="cidades">
   <option value="" id=""></option>
   <option value="10" id="1" style="display:none;">Americana</option>
   <option value="11" id="1" style="display:none;">Campinas</option>
   <option value="12" id="1" style="display:none;">São Paulo</option>
   <option value="15" id="2" style="display:none;">Rio de Janeiro</option>
</select>
    Reparem que eu defini o estilo css como display:none.... pois não quero que eles apareçam por enquanto... preciso que os campos apenas apareçam depois de selecionar o estado.. ai o value do select (exemplo: Rio de Janeiro -> 2) exiba apenas os campos com id="2"

    e ao alterar o estado, ele oculte os com id="2" e exiba apenas os com o novo id selecionado.


    Eu não posso usar ajax pois os campos select estão usando uma folha de estilo jQuery e quando é criado o novo select.. o campo novo fica fora desta folha de estilo...

    Grato,

    Klaus
    Similar Threads
    Tags: atualiza, java script, select
    • Top
  • Font Size
    #2
    Amigo, está perdendo tempo , se está usando o super jQuery ( sim, eu gosto muito do framework), basta fazer um codigo simples

    Código HTML:
    
<html>

<head>
<title>teste</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
	
	$(document).ready(function(){
					


					$('#estados').change(function(){
						var selected = $('#estados').val();
						if(selected == 1){
							$('.1').show();
							$('.2').hide();
						}else{
							$('.1').hide();
							$('.2').show()
						}	
						
					});

	});


</script>
</head>



<select id='estados' name="estados">
   <option value=""></option>
   <option value="1">SP</option>
   <option value="2">RJ</option>
</select>

<br>

<select name="cidades">
   <option value="" id="" ></option>
   <option value="10" id="1" class='1' style="display:none;">Americana</option>
   <option value="11" id="1" class='1' style="display:none;">Campinas</option>
   <option value="12" id="1" class='1' style="display:none;">São Paulo</option>
   <option value="15" id="2" class='2' style="display:none;">Rio de Janeiro</option>
</select>



</html>

    Tive que colocar a class como 1 e 2 , porque como deve saber o id é unico , no seu caso você deve alterar o codigo, pois não sera validado e vai dar erro no jQuery , agora class pode ter repetido,
    teste o script e faça as alterações necessarias.

    Qualquer duvida meu skype : system_pedro
    • Top

    Comment

    Anterior template Avançar
    X
    Working...
    X