Cascading drop-down
View code
<script language="Javascript" src="/includes/ajax/ajaxCaller.js"></script>
<script language="Javascript" src="/includes/ajax/util.js"></script>
<script language="javascript">
var posi=1;
// Función que hace la llamada al WebService
function importJSON(sel_as)
{
if(sel_as == -1)
{
borrar_todos(document.formulario.noticias);
return;
}
var url="/codigos.getNoticias?categ="+sel_as;
ajaxCaller.getPlainText(url, datosService);
}
// Función genérica que inserta un elemento en el control lista desplegable
function insert_element(destino,value,text)
{
elem = new Option(text, value, false, true);
elem.selected=false;
destino.options[posi]=elem;
posi++;
}
// Función genérica que elimina los elementos del control lista desplegable
function borrar_todos(campo)
{
var n=campo.length;
for(var i=1;i<n;i++){
campo.remove(1);
}
posi=1;
}
function datosService(jsonDoc)
{
var elementos=eval('('+jsonDoc+')');
borrar_todos(document.formulario.noticias);
for(var i=0;i<elementos.length;i++)
{
insert_element(document.formulario.noticias,elementos[i].id, elementos[i].titular);
}
}
</script>
<div align="center">
<form action="" method="post" name="formulario">
<label for="categorias">Categories:</label>
<select class="text" name="categorias" onchange="javascript:importJSON(document.formulario.categorias.options[document.formulario.categorias.selectedIndex].value);" style="height:10px">
<option value="-1">----------</option>
<eBD:QUERY DATASOURCE="principal" NAME="Cat">
SELECT idCategoria,Categoria FROM Categorias ORDER BY Categoria ASC
</eBD:QUERY>
<eBD:FOREACH QUERY="Cat">
<eBD:FETCHROW QUERY="Cat" NAME="item" />
<option value="<eBD:OUT VALUE="&item.idCategoria"/>"><eBD:OUT VALUE="&item.Categoria" /></option>
</eBD:FOREACH>
</select><br>
<label for="noticias">News:</label>
<select name="noticias" class="text">
<option value="-1">----------</option>
</select>
</div>
</form>
View WebService
<eBD:CODE>
<eBD:ARGS NAME="categ" DEFAULT="0"/>
<eBD:VAR TYPE="ARRAY" NAME="elementos"/>
<eBD:IF EXPR="$categ != '0'">
<ebd:quote var="categ" value="$categ"/>
<eBD:QUERY NAME="noticias" DATASOURCE="principal">
SELECT idNoticias, titular FROM Noticias WHERE idCategoria =$categ
</eBD:QUERY>
<eBD:IF EXPR="¬icias > 0">
<eBD:FOREACH QUERY="noticias">
<eBD:FETCHROW NAME="item" QUERY="noticias"/>
<eBD:VAR TYPE="HASH" NAME="elemento"/>
<eBD:SET VAR="elemento" index="id" value="&item.idNoticias"/>
<eBD:SET VAR="elemento" index="titular" value="&item.titular"/>
<eBD:PUSH ARRAY="elementos" VALUE="$elemento"/>
</eBD:FOREACH>
</eBD:IF>
</eBD:IF>
<eBD:RETURN VALUE="$elementos"/>
</eBD:CODE>
Cascade drop-down
From the selected value of the first drop-down the WebService returns the related data which is used to fill the second drop-down