motivación:
Ahora hagamos un pequeño ejemplo de aplicación de XML en IE: resolviendo el problema de vinculación de menús desplegables dobles. Quizás el ejemplo más común sea seleccionar una provincia y luego cambiar las opciones de ciudad, así que intentemos usar XML para completarlo.
Algunas de las funciones que presenté antes se implementaron directamente usando archivos XML+XSL. Es posible que no esté muy familiarizado con su uso, por lo que esta vez usaré HMTL+XML, con la esperanza de que todos comprendan más claramente: "XML puede ser así. ¡simple!" :)
Material:
Hay 2 archivos vinculados al menú de selección de volumen XML: Citys.xml y CitySelect.htm.
Las funciones son:
Después de seleccionar una provincia, la ciudad correspondiente se puede mostrar automáticamente, lo cual es conveniente para los usuarios, mejora efectivamente la interacción de datos y hace que su página sea más colorida.
Efecto:
Navegar aquí
Código:
Ciudades.xml
Función personalizada
CitySelect.htm
: ChooseState
(Lea el nombre de la provincia en los datos XML y agréguelo a la lista desplegable de SelState)
funciónElegirEstado()
{
fuente var;
var sourceName = "Ciudades.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Crea una instancia de analizador MSXML
fuente.async = falso;
source.load(nombrefuente); //Cargar documento XML
root = source.documentElement; //Establece el elemento del documento como elemento del nodo raíz.
sortField=root.selectNodes(" //@name "); //Busca todos los nodos cuyos atributos contengan nombre ");
for(var i=0;i
var oOption = document.createElement('OPCIÓN');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ElijaCiudad();
}
Función personalizada: ElegirCiudad
(Lea el nombre de la ciudad correspondiente en los datos XML según el nombre de la provincia seleccionada actualmente y agréguelo a la lista desplegable SelCity)
funciónElegirCiudad()
{
x=form1.SelState.selectedIndex; //Leer las opciones actuales del cuadro desplegable de provincia
y=form1.SelState.options[x].valor;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Busca todos los nodos de ciudad bajo el nodo Estado cuyo valor de atributo de nombre sea igual al parámetro y
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Deshacer el elemento de la lista original
{
formulario1.SelCity.opciones.eliminar(i)
}
for(var i=0;i
var oOption = document.createElement('OPCIÓN');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
Código fuente del formulario