JQuery - obtener html de un option select

   
Vista:

obtener html de un option select

Publicado por hola (14 intervenciones) el 31/12/2015 04:08:52
buenas noches, estoy intentando recorrer un select y que me devuelva todo el html del option, cuando me lo devuelve lo guardo en una variable y si lo quiero mostrar por consola me muestra "[object Object]".

Lo que hago es lo siguiente
1
2
3
// recorre 
$("#" + idRecorrer + " " + tipoRecorrer).each(function(){
alert($(this).html());

el idRecorrer y tipoRecorrer lo recibe como parametro
---> idRecorrer seria el nombre del id que vamos a recorrer
---> tipoRecorrer es eltipo, por ejemplo si queremos recorrer un select, el tipoRecorrer seria option, si lo que estamos recorriendo es una tabla el tipoRecorrer seria tr

1
2
3
4
5
<select id='combo'>
<option value="-">Sexo...</option>
<option value="M">Macho</option>
<option value="H">Hembra</option>
</select>

yo tengo este select y quiero recorrerlo y que me devuelva cada option, no solo el valor sino el option completo
y con el $(this).html() solamente me devuelve el valor y no por ejemplo <option value="-">Sexo...</option>.

desde ya muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Danny

obtener html de un option select

Publicado por Danny (7 intervenciones) el 31/12/2015 19:33:51
Aqui tienes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
		function recorrer(idRecorrer,tipoRecorrer){
			$("#"+idRecorrer+" "+tipoRecorrer+"").each(function(){
				alert($(this).text() + " - " + $(this).val())
			});
		}
	</script>
</head>
 
<body onload="recorrer('combo','option')">
<select id='combo'>
<option value="-">Sexo...</option>
<option value="M">Macho</option>
<option value="H">Hembra</option>
</select>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

obtener html de un option select

Publicado por hola (14 intervenciones) el 03/01/2016 18:01:51
Muchas gracias por la respuesta !! Pero lo que yo necesito es capturar el option entero, es decir el html que dice "<option val="m" > macho </option>" y no generarlo por el val () y el text ().

Desde ya muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

obtener html de un option select

Publicado por Vainas (96 intervenciones) el 03/01/2016 19:50:35
Buenas:

Lo primero (me hago mi hipotesis) si esto lo vas a usar para guardar los option y luego volverlos a mostrar o algo por el estilo es mejor que los guardes como tal y luego los agreges al select con alguna function de jQuery como append, es decir, no guardes este valor como un string para usarlo de nuevo, es mejor aprender a guardarlo como un valor jQuery o un objeto javascript. Dicho esto paso a comentar lo que sucede.

$(this).html() imprime lo que hay dentro de una etiqueta incluso si dentro hay etiquetas html, lo que pasa es que dentro de un option solo hay texto:

1
<option> texto </option>

He conseguido un ejemplo en esta web (ingles) http://jquery-howto.blogspot.com.es/2009/02/how-to-get-full-html-string-including.html que comento:

1
var html = $('<div>').append($(this).clone()).remove().html();

$('<div>') con esto creas una nueva etiqueta div en la que dentro le vas a meter una copia de tu actual elemento .append($(this).clone()) con append incluyes dentro de el div creado el elemento pero usas clone por que sino se eleminaria el elemento dentro de tu select

Entiendo que usa remove para remover la etiqueta div que ha creado y esta misma funcion te desvuelve la etiqueta div a la que le aplicas la funcion html() para recoger como un string lo que tiene dentro que es el option:

1
2
3
<div>
<option> texto </option>
</div>

Espero que te sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar