Autoselecionar um elemento OPTION de um SELECT a partir de um evento com jQuery

Minha nossa que título enorme e redundante, pra que escrever OPTION de um SELECT, se não existe option em outro elemento ? (risos)

É realmente é desnecessário e enorme mesmo, mas porque foi o melhor título que achei para definir a bagaça quando alguém for procurar no google, se tiver outro melhor sugira nos comentários (risos).

Vamos ver como autoselecionar um elemento option. Para quem não sabe, OPTION é um elemento filho de SELECT da TRIBO dos elementos FORM. Vamos ver também como selecionar um option a partir de um evento qualquer realizado em outro elemento.

De volta ao nosso assunto, jQuery possui alguns seletores para formulário bem interessantes e fáceis, mas como isto aqui não é cursinho de jQuery, é só um post, vamos usar os seguinte seletores:

  • :selected – Usado para verificar qual elemento OPTION está selecionado
  • elemento[value=”valor – usado para procurar o elemento, no nosso caso “OPTION”, que possui determinado valor

Este sistema de autoselecionar é muito usado em formulários de cadastro tipo do submarino, americanas, etc, onde você para não ter que informar os mesmos dados do endereço de residencia nos dados de endereço de entrega, acaba clicando somente em um botão ou checkbox ou sei lá o que que inventaram para facilitar sua vida, então vamos fazer algo similar.

IMPORTANTE: Este exemplo é só para mostrar como funciona esta lógica através da biblioteca jQuery, se você for usar para um projeto pessoal,

não se esqueça que ao trocar algum valor nos campos de endereço residencial, os valores não serão modificados no endereço de entrega, neste caso precisaríamos criar algum tipo de validação, o que está totalmente fora do escopo deste post, embora seja algo simples de se fazer a princípio.

  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <meta charset="utf-8" />

  <!-- Coloque aqui o link para seu arquivo jQuery caso não queira usar o link online -->

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

  jQuery(function(){

	  /* Através do evento click no elemento com o name "mesmoEndereco" vamos definir as preferencias */

	  $('input[name="mesmoEndereco"]').click(

		function() {

			/* Só vamos fazer algo se o valor do campo for sim, é claro! */

	        if( $(this).val() == 'sim' )  {

			    /* Precisamos antes alertar o tonhonhom que ele precisa selecionar uma cidade antes */

		    	if( $('#cidadeResidencia option:selected').val() == 0 ) {

			       alert('Você precisa primeiro selecionar o campo CIDADE amigo!');

		        } else {

			        /* Pega o valor do campo residencial e busca pelo elemento com este valor no correspondente para entrega */

		            var cidadeResidencia = $('#cidadeResidencia').val();

		            $('#cidadeEntrega option[value="' + cidadeResidencia + '"]').attr({ selected : "selected" });

		        }

			}

		}

	  );

  });

  </script>

</head>

<body>

  <form>

    <h2>Endereço de Residência</h2>

    <label for="cidadeResidencia">

	    <select id="cidadeResidencia" name="cidadeResidencia">

	        <option value="0" selected="selected"> - - ESCOLHA - - </option>

	        <option value="SAO PAULO">SÃO PAULO</option>

	        <option value="RIO DE JANEIRO">RIO DE JANEIRO</option>

	        <option value="BALNEARIO CAMBORIU">BALNEARIO CAMBORIU</option>

	    </select>

    </label>

    <h2>Endereço de Entrega</h2>

    <p>

    	Usar o mesmo endereço residencial para entrega?

    	<input type="radio" name="mesmoEndereco" value="sim" /> Sim

    	<input type="radio" name="mesmoEndereco" value="nao" checked="checked" /> Não

    </p>

    <label for="cidadeEntrega">

	    <select id="cidadeEntrega" name="cidadeEntrega">

	        <option value="SAO PAULO">SÃO PAULO</option>

	        <option value="RIO DE JANEIRO">RIO DE JANEIRO</option>

	        <option value="BALNEARIO CAMBORIU">BALNEARIO CAMBORIU</option>

	    </select>

    </label>

  </form>

</body>

</html>

Um comentário sobre “Autoselecionar um elemento OPTION de um SELECT a partir de um evento com jQuery”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *