Combos dependientes+Prototype

seinkraft · #1 (**permalink**) 04/05/2009, 08:40

Hola a todos, tengo una serie de 4 combos dependientes en los que dependiendo lo que se seleccione en el primero se muestra el contenido del segundo y asi sucesivamente hasta llevar los 4.

El problema es que aveces no hay 4 niveles, por lo que no se puede llenar los 4 y queria que los sobrantes se ocultaran.

El codigo que tengo esta echo para que siempre quede la opcion "Select", tenga o no otras opciones el select. Lo que quiero es que cuando solo esta el Select sin ningun otra opcion se oculte el selector (<option></option)

Este es el js:

Código javascript:

Ver originalvar inner_select   = 'Select';
var value_select   = '0.5';
var loading_select = 'Loading';
var select_id      = 'c_id';
var select_value   = 'c_name';
 
function getJson(uri,id,param,next)
{
    new Ajax.Request(
        uri,
        {
            method: 'POST',                     
            parameters:
            {
                id: param
            },
            onLoading:
            function()
            {
                if ($(id) == '0.5')
                {
                    $(next).hide();
                }
                else
                {
                $(next).show();
                $(id).update('').disable();
                createOpt(id,value_select,loading_select);
                                }
            },
            onSuccess:
            function(json)
            {
                $(id).enable();
                json = json.responseText;
                getOpt(json.evalJSON(true),id);
            }
        });
}
 
function getOpt(json,id)
{
    $(id).update('');
    createOpt(id,value_select,inner_select);
    json.each(
        function(obj)
        {
            createOpt(id,obj[select_id],obj[select_value]);     
        }
    );
}
 
function createOpt(id,value,inner)
{
    var opt = document.createElement('option');
    opt.value = value;
    opt.innerHTML = inner;
    $(id).appendChild(opt);
}
 
function selectHide(id)
{
    $(id).hide();
}

Código html:

Ver original<body>
<select id="0level" name="0level">
<option value="0">vacio</option>
</select> 
 
<select id="1level" name="1level">
<option value="0">vacio</option>
</select>
 
<select id="2level" name="2level">
<option value="0">vacio</option>
</select>
 
<select id="3level" name="3level">
<option value="0">vacio</option>
</select>
</body>
<script type="text/javascript">
getJson('<?php echo base_url(); ?>test/get_categoriesPrototype','0level','','0level'), selectHide('1level'), selectHide('2level'), selectHide('3level')
$('0level').observe('change',function(el){ getJson('<?php echo base_url(); ?>test/get_subcategoriesPrototype','1level',$F('0level'),'1level') })
$('1level').observe('change',function(el){ getJson('<?php echo base_url(); ?>test/get_subcategoriesPrototype','2level',$F('1level'),'2level') })
$('2level').observe('change',function(el){ getJson('<?php echo base_url(); ?>test/get_subcategoriesPrototype','3level',$F('2level'),'3level') })
</script>