Tecnologia de Programação 1 e 2 (2009) » select http://www.brunocampagnolo.com/2009tp PUCPR > Bacharelado em Sistemas de Informação > 3o e 4o Períodos Fri, 18 Dec 2009 10:40:02 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Dicas Rápidas – ExF03 – Selects com jQuery http://www.brunocampagnolo.com/2009tp/2009/04/20/dicas-rapidas-exf03-selects-com-jquery/ http://www.brunocampagnolo.com/2009tp/2009/04/20/dicas-rapidas-exf03-selects-com-jquery/#comments Mon, 20 Apr 2009 16:07:03 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=217 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.

]]> http://www.brunocampagnolo.com/2009tp/2009/04/20/dicas-rapidas-exf03-selects-com-jquery/feed/ 0