como acceder a los valores de un select con this

Copia · #1 (**permalink**) 26/07/2011, 16:28

Hola comunidad, se como acceder a los valores de un select con javascript puro, pero queria saber como traducirlo a jquery:
El select en html es

Código HTML:

Ver original<select name="seEsp" onchange="changed(this);" id="selFalEsp">
<option value="0">Seleccione</option>
<option value="4">Obra de Arte</option>
<option value="5">Soldador</option>
</select>

Código Javascript:

Ver originalfunction changed(){
    aa = document.formEsp.seEsp.selectedIndex;
    asf = document.formEsp.seEsp.options[aa].text;
    alert("Id es = "+aa+ " y el texto es = "+asf);
}

Asi es como lo intente y funciona a medias, porque text me muestra todos los texto que tengo en el option:

Código Javascript:

Ver originalfunction changed(){
aa =     $("#selFalEsp").val();
asf =  $("#selFalEsp").text();
alert("Id es = "+aa+ " y el texto es = "+asf);
}

pero queria saber si esto lo puedo conseguir con this, porque estoy enviando this. Y ya lo intente pero no me sale -> onchange="changed(this);".

Naahuel · #2 (**permalink**) 26/07/2011, 17:15

Pues para "pasarlo" mejor a jQuery yo le quitaría el atributo "onchange" al select y lo haría así:

Código Javascript:

Ver original$(function(){
    $('select').change(function(){
        //hacer algo
    });
});

Claro que el selector ('select') lo podemos cambiar por algo más específico si no queremos seleccionar todos los <select> de la página.

Respecto a tu pregunta, te recomiendo que leas la documentación de jQuery ante cualquier duda de qué exactamente hace cada método.

.val() es para elementos de formulario (inputs, selects, textareas, etc). Devuelve el valor que tiene ese elemento. En el caso del select, devolvería el valor del atributo "value" de la opción que está seleccionada o su texto, de no tener dicho atributo. Mirá este ejemplo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
$(function(){
    $('select').change(function(){
          alert('Valor: ' + $(this).val());
    });
});
  </script>
</head>
<body>
<select id="Hola">
  <option>Op 1</option>
  <option value="2">Op 2</option>
  <option>Op 3</option>
  <option>Op 4</option>
  <option>Op 5</option>
  </select>
</body>
</html>

Observá que la única opción con atributo value es la 2, por lo que si la seleccionás obtendrás un "2" en el alert, pero no así con los demás.

Eso sería todo lo que necesitás, no hace falta que obtengas el "selected-index".

Copia · #3 (**permalink**) 26/07/2011, 18:00

Cita:

Iniciado por Naahuel

Código Javascript:

Ver original$(function(){
    $('select').change(function(){
        //hacer algo
    });
});

Hola gracias por tu respuesta, mira yo intente hacer lo que me dice, pero no se porque no me funciona, pasa que este select lo genero luego de una llamada $.ajax y con una funcion coloco el select al documento original dentro de un div. Supongo que por eso no me funciona.

Naahuel · #4 (**permalink**) 26/07/2011, 18:02

Claro, si el select es agregado al dom no tendrá la función asginada al evento onchange. Probá esto:

Código Javascript:

Ver original$('#idDelDiv').delegate('select','change',function(){
        //hacer algo
    });

Reemplazá #idDelDiv por un selector para tu div que contiene el select.

Copia · #5 (**permalink**) 27/07/2011, 08:32

gracias Naahuel, probe lo que me recomendo pero nada, lo unica forma como me funciona es hacerlo con onchange como coloque arriba.

lo intente así:

Código Javascript:

Ver original$('#selFalEsp').delegate('select','change',function(){
       alert('hoal');
    });

Naahuel · #6 (**permalink**) 27/07/2011, 09:28

No no, "selFalEsp" no es el ID del selct? Para delegate necesitás usar el ID del padre. Supongamos que tenés algo así:

Código HTML:

Ver original<div id="divPadre">
    <select id="selFalEsp">
        <option value="A">Item A</option>
        <option value="B">Item B</option>
        <option value="C">Item C</option>
    </select>
</div>

Entonces tendrías que poner esto:

Código Javascript:

Ver original$('#divPadre').delegate('#selFalEsp','change',function(){
   alert('hoal');
});

Se entiende?

Copia · #7 (**permalink**) 28/07/2011, 08:52

Muchas gracias, no conocia a delegate, me ayudo mucho.