Como saber y enviar el valor del elemento seleccionado

neodani · #1 (**permalink**) 05/05/2010, 14:46

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Marcando elementos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("li").click( function () {
        $(this).toggleClass('activo');
        var n = $('.activo').length;
        //$("span").text("Hay " + n + " elementos seleccionados");
        
        $("span").text("Valor del elemento seleccionado " + $("li").attr('title'));
        
    });
});
</script>
<style type="text/css">
 
body{
    font-family:verdana;
    size:12px;
    margin:0 auto;
    text-align:left;
}
.debug{
    margin:50px 0 0 100px;
    display:block;
}
.lista {
    padding:10px;
    margin:0px;
    list-style:none;
}
.lista li {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
    
}
.lista li:hover {
    border:1px solid #67EF58;
    text-decoration:none;
    cursor:pointer;
}
 
.activo{
    background:#A4EF9C;
    font-weight:bold;
    color:#fff;
}
#simulador{
    margin:60px 0 10px 100px;
    width:500px;
}
.pregunta{
    height:25px;
    background:#eee;
    text-align:left;
}
p.pregunta{
    font-weight:bold;
    padding:6px 0px 0px 15px;
    margin:0;
}
#lista_preguntas{
    border:1px solid #ccc;
    padding:2px;
}
#progreso_simulador{
    margin:60px 0 0 100px;
}
</style>
</head>
<body>
<div id="progreso_simulador">Aqui va una barra de progreso...</div>
<div id="simulador">
    <p class="pregunta">¿Qué tipo de combustible usa tu coche?</p>
    <div id="lista_preguntas">
        <ul class="lista">
            <li title="Diesel">Diesel</li>
            <li title="Gasolina">Gasolina</li>
        </ul>
    </div>
</div>
<span class="debug"></span>
</body>
</html>

Muchas gracias de antemano!

SergeMedina · #2 (**permalink**) 05/05/2010, 14:54

Es porque:

Código Javascript:

Ver original$('li').attr('title');

toma el primer elemento de la lista, ya que no estas siendo especifico. Para saber cual has presionado utiliza:

Código Javascript:

Ver original$(this).attr('title');

neodani · #3 (**permalink**) 05/05/2010, 15:54

Muchas gracias SergeMedina, de esa forma me dice cual ha sido el último elemento seleccionado.

Pero si se seleccionan los dos elementos solo guarda el último valor, ¿Existe alguna manera de enviar la información de los elementos que fueron marcados vía ajax?

¿Y poder restringir que solo se marque una opción, en lugar de dos? es decir, que cuando se haya marcado una opción, si se pulsa cualquier otra que se desmarque la opción anterior y se marque la nueva.

Muchas gracias de antemano!

mayid · #4 (**permalink**) 05/05/2010, 18:42

Por que no usas un formulario de radio buttons?!

Podes restringir la cosa, si. Usando :not

Yo no se bien la sintaxis, pero buscala: $("li:not[$(this)]").removeClass('activo);

Cita:

$(document).ready(function() {
$("li").click( function () {

$(this).toggleClass('activo');
$("li:not[$(this)]").removeClass('activo);
var n = $('.activo').length;

$("span").text("Valor del elemento seleccionado " + $(this).attr('title'));

});
});

Dany_s · #5 (**permalink**) 06/05/2010, 04:34

Código HTML:

<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$( function (){
    $('li').click( function (){
        $(this).addClass('activo').siblings().removeClass('activo');
    });
    $(':submit').click( function (){
        valor = $('li.activo').text(); //acá recupero el li seleccionado
        if (valor != ""){
            $('#valor').val(valor);
            alert("El activo es li "+valor);
        } else {
            alert("Sin selección");
        }
    });
});
</script>
<style>
    .activo{background:red}
</style>
</head>
<body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
    </ul>
    <input type="hidden" name="valor" id="valor">
    <input type="submit" value="Enviar">
</body>
</html>

neodani · #6 (**permalink**) 06/05/2010, 09:21

Cita:

Iniciado por Dany_s

Código HTML:

<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$( function (){
    $('li').click( function (){
        $(this).addClass('activo').siblings().removeClass('activo');
    });
    $(':submit').click( function (){
        valor = $('li.activo').text(); //acá recupero el li seleccionado
        if (valor != ""){
            $('#valor').val(valor);
            alert("El activo es li "+valor);
        } else {
            alert("Sin selección");
        }
    });
});
</script>
<style>
    .activo{background:red}
</style>
</head>
<body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
    </ul>
    <input type="hidden" name="valor" id="valor">
    <input type="submit" value="Enviar">
</body>
</html>

Muchas gracias Dany_s

Esta linea de aquí no debería permitir marcar y desmarcar un elemento si se vuelve a pulsar sobre él?

$('li').click( function (){
$(this).addClass('activo').siblings().removeClass( 'activo');
});

Es que si pulsas sobre un elemento y luego vuelves a pulsar sobre él para "desmarcarlo" sigue marcado :S

Gracias de antemano!

Dany_s · #7 (**permalink**) 06/05/2010, 10:02

entonces usa toogleClass en vez de addClass

Código Javascript:

Ver original$('li').click( function (){
        $(this).toggleClass('activo').siblings().removeClass('activo');
    });

mayid · #8 (**permalink**) 06/05/2010, 10:02

.siblings() habla de los elementos li que estan al lado del que seleccionaste (elementos hermanos).

remove class va para ellos.

Si queres deseleccionar el seleccionado, tenes que usar toggle.