Conectar

Ver Versão Completa : [JQuery] - sincronizar dois select's



CCV_Pinto
30-09-2009, 01:56 PM
ontem eu fiz uma modificaçãozinha no fórum, adicionando um novo select box na página de mensagens (Caixa de Entrada)

isso pq a página ficava comprida e soh dava pra deletar mensagens indo até lá embaixo e selecionando a ação no select (ou dropdownlist) lá de baixo

então a minha idéia foi adicionar um novo "select" suporte em cima, qdo vc mudar o select de cima, ele automaticamente muda o select de baixo

fiz isso em duas linhas com jquery (http://jquery.com)

para quem não sabe jquery é uma biblioteca em javascript que facilita MUITO a escrita de javascript (vc cria até efeitos de aparecer e ocultar uma coisa de forma bonita muito fácil, por exemplo algumacoisa.show())

vamos ao nosso código

tinha um select:




<select id="selectoriginal">
<option value="valor1">Valor1</option>
</select>


eu criei um segundo:




<select id="selectsuporte">
<option value="valor1">Valor1</optioen>
</select>


e o código para sincronizar os dois selects:



<script type="text/javascript">

$(document).ready(function(){
$("select#selectsuporte").change(function()
{
$("select#selectoriginal").attr("value",$("select#selectsuporte").val());
});

$("select#selectoriginal").change(function()
{
$("select#selectsuporte").attr("value",$("select#selectoriginal").val());
});
});
</script>



explicando o código:



$(document).ready(function(){

toda função no jquery começa desse jeito, vc estah dizendo: "qdo o documento estiver pronto, faça o seguinte..."




$("select#selectsuporte").change(function()



agora vc está dizendo: pegue a "selectsuporte" assim que tiver uma mudança (change) faça a ação que vem a seguir



$("select#selectoriginal").attr("value",$("select#selectsuporte").val());


por fim, vc pega o selectoriginal e muda o atributo value dele para o valor que estiver no selectsuporte

eh bem simples, mas tem a mudança de sintaxe do javascript normal para o do jquery, então eh um exemplo bom para começar com jquery

abraços