Hola gente del foto,
Estoy posteando mi primer mensaje.
Estoy teniendo problema con un anidamiento, estuve buscando mucho y no encuentro la respuesta por ningún lado.
Les cuento y muestro lo que me pasa.
Yo tengo dos "selects", que están anidados, esto lo hice muchas veces y nunca tuve problema. Pero en realidad no son 2 selects, sino dos <div> con dos <ul> que muestra las opciones. Como siempre, yo selecciono una opción en el primer div y con Jquery y PHP busco la información del seegundo, y cargo el segundo ul. Hasta ahí todo bien.
Pero cuando quiero seleccionar la segunda opción no puedo... y no encuentro el problema. Esto anda ok hasta un momento, pero no puedo describir porque dejo de andar .
Les paso el código:
// ----------------------------- HTML
<ul id="options">
/// CARGA LA INFO POR BASE DE DATOS (lo ahce ok).
</ul>
<div class="option">
<div class="tld_static" id="reg">
<p id="primer_valor">seleccione una categoría</p>
</div>
<input id="option_valor" type="hidden" name="option_valor" value=""/>
</div>
<div>
<ul id="options-sub">
</ul>
</div>
<div class="option-sub">
<div class="tld_static" id="reg-sub">
<p id="primer_valor-sub">seleccione una subcategoría</p>
</div>
<input id="option_valor-sub" type="hidden" name="option_valor-sub" value=""/>
</div>
// ----------------------------- jQuery
jQuery.noConflict();
jQuery(document).ready(function(){
var first=jQuery("#options li:first").attr("title");
var firstSub=jQuery("#options-sub li:first").attr("title");
jQuery("#option_valor").val(first);
jQuery("#option_valor-sub").val(firstSub);
jQuery("#reg").click(function(){
jQuery("#options").css('margin-top','34px');
jQuery("#options").css('margin-left','4px');
jQuery("#options").toggle(1);
});
jQuery("#options li").click(function(){
var tld=jQuery(this).attr("title");
jQuery("#option_valor").val(tld);
jQuery("#primer_valor").html(tld);
jQuery("#options").toggle(2);
id = jQuery(this).attr("alt");;
jQuery.post("buscar-subcategorias-guia.php",{ id: id },
function(data){
jQuery("#options-sub").html(data);
}
)
});
jQuery("#reg-sub").click(function(){
jQuery("#options-sub").css('margin-top','34px');
jQuery("#options-sub").css('margin-left','230px');
jQuery("#options-sub").toggle(1);
});
jQuery("#options-sub li").click(function(){
var tld=jQuery(this).attr("title");
jQuery("#option_valor-sub").val(tld);
jQuery("#primer_valor-sub").html(tld);
jQuery("#options-sub").toggle(2);
});
});
// -------------------------- PHP
busca en la base de datos, y devuelve una variable con, por ejemplo, esta información:
<li title="Verde" alt="2">Verde</li><li title="Azul" alt="2">Azul</li>
El código no tira ningún error...
Yo se que hay mucho del tema, pero busque y no encuentro la respuesta para mi problema
Espero me puedan ayudar,
Gracias de antemano.
Slds,