Dicas Rápidas – ExF03 – Selects com jQuery

20 abril, 2009 (13:07) | dúvida | Por: admin

Para obter o valor de um <select> através da biblioteca jQuery é necessário descobrir qual é a opção selecionada.

No exemplo abaixo (e no link), ao trocar o item selecionado em uma caixa de seleção, o valor selecionado e o texto referente ao valor são exibidos.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready( function () {
    // Evento onchange do select
    $("#slTipo").change( function() {
      // exibe o valor selecionado e o texto do valor selecionado
      $("#resultado").html("Item selecionado com o valor " + $(this).val() +
                           " e com o texto "+$("#slTipo :selected").text());

    });
  });
</script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
</head>
<body>
  <form action="">
    <select id="slTipo">
      <option value="v1">Op1</option>
      <option value="v2">Op2</option>
      <option value="v3">Op3</option>
    </select>
  </form>
  <div id="resultado"></div>
</body>
</html>

No caso do envio da informação de um select para o servidor Web, pode-se utilizar a função de serialização para codificar o valor do select. Veja abaixo, e no link.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready( function () {
    // Evento onchange do select
    $("#btEnviar").click( function() {
      // Serializa os itens do formulário
      var s = $("#myForm").serialize();
      //
      $("#resultado").html(s);
      // Agora, você pode enviar via Ajax o valor dos itens de formulário...
    });
  });
</script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
</head>
<body>
  <form action="" id="myForm">
    <input type="text" id="nome" name="nome">
    <select id="slTipo" name="slTipo">
      <option value="v1">Op1</option>
      <option value="v2">Op2</option>
      <option value="v3">Op3</option>
    </select>
    <input type="button" value="Enviar" id="btEnviar">
  </form>
  <div id="resultado"></div>
</body>
</html>

Para um exemplo completo de interação com o servidor, observe o exemplo em anexo.

Tags: , , ,

Escreva um comentário