Tema: Como saber y enviar el valor del elemento seleccionado
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/05/2010, 14:46
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Como saber y enviar el valor del elemento seleccionado
Buenas,

No consigo saber el valor del elemento que tengo seleccionado. ¿Cuál es la forma correcta de hacerlo? he puesto un atributo title al elemento <li> pero a lo mejor se puede de otra forma?

De esta forma seleccione la opción que seleccione me dice que es "Diesel"

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
  2. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <title>Marcando elementos</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.     $("li").click( function () {
  9.         $(this).toggleClass('activo');
  10.         var n = $('.activo').length;
  11.         //$("span").text("Hay " + n + " elementos seleccionados");
  12.         
  13.         $("span").text("Valor del elemento seleccionado " + $("li").attr('title'));
  14.         
  15.     });
  16. });
  17. </script>
  18. <style type="text/css">
  19.  
  20. body{
  21.     font-family:verdana;
  22.     size:12px;
  23.     margin:0 auto;
  24.     text-align:left;
  25. }
  26. .debug{
  27.     margin:50px 0 0 100px;
  28.     display:block;
  29. }
  30. .lista {
  31.     padding:10px;
  32.     margin:0px;
  33.     list-style:none;
  34. }
  35. .lista li {
  36.     display:block;
  37.     height:18px;
  38.     text-decoration:none;
  39.     color:#666666 !important;
  40.     padding:1px 5px 1px 5px;
  41.     border:1px solid #ffffff;
  42.     
  43. }
  44. .lista li:hover {
  45.     border:1px solid #67EF58;
  46.     text-decoration:none;
  47.     cursor:pointer;
  48. }
  49.  
  50. .activo{
  51.     background:#A4EF9C;
  52.     font-weight:bold;
  53.     color:#fff;
  54. }
  55. #simulador{
  56.     margin:60px 0 10px 100px;
  57.     width:500px;
  58. }
  59. .pregunta{
  60.     height:25px;
  61.     background:#eee;
  62.     text-align:left;
  63. }
  64. p.pregunta{
  65.     font-weight:bold;
  66.     padding:6px 0px 0px 15px;
  67.     margin:0;
  68. }
  69. #lista_preguntas{
  70.     border:1px solid #ccc;
  71.     padding:2px;
  72. }
  73. #progreso_simulador{
  74.     margin:60px 0 0 100px;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div id="progreso_simulador">Aqui va una barra de progreso...</div>
  80. <div id="simulador">
  81.     <p class="pregunta">¿Qué tipo de combustible usa tu coche?</p>
  82.     <div id="lista_preguntas">
  83.         <ul class="lista">
  84.             <li title="Diesel">Diesel</li>
  85.             <li title="Gasolina">Gasolina</li>
  86.         </ul>
  87.     </div>
  88. </div>
  89. <span class="debug"></span>
  90. </body>
  91. </html>

Muchas gracias de antemano!