Практические советы по XML-тому (4): Связывание меню

мотивация:
Теперь давайте приведем небольшой пример применения XML в IE: решение проблемы связи двойных раскрывающихся меню. Возможно, наиболее распространенным примером является выбор провинции и последующее изменение параметров города, поэтому давайте попробуем использовать XML для завершения этого процесса.

Некоторые из функций, которые я представил ранее, были реализованы непосредственно с использованием файлов XML+XSL. Возможно, вы не очень хорошо знакомы с его использованием, поэтому на этот раз я буду использовать HMTL+XML, надеясь дать всем более четкое понимание: «XML может быть таким». простой!" :)

Материал:
С меню выбора объема XML связаны два файла: Citys.xml и CitySelect.htm.

Функции:
После выбора провинции соответствующий город может отображаться автоматически, что удобно для пользователей, эффективно улучшает взаимодействие с данными и делает вашу страницу более красочной.
Эффект:
Просмотреть здесь
Код:
Города.xml

<Китай>

<Город>Цзюцзян
<Город>Наньчан
<Город>Лушань
<Город>Циндэчжэнь


Западный Пекин
<Город>Цзюёнгуань
Сад Цинхуа
<Город>Чжоукодянь


<Город>Фучжоу
<Город>Сямынь
<Город>Чжанчжоу


<Город>Ланьчжоу
<Город>Ломен
<Город>Цзяюгуань


<Город>Гуанчжоу
<Город>Шэньчжэнь
<Город>Дунгуань
Шипай


<Город>Хэфэй
<Город>Хуаншань
Коулун-Хилл
<Город>Мааньшань

CitySelect.htm

: ChooseState
(Прочитайте название провинции в данных XML и добавьте его в раскрывающийся список SelState)

функцияВыборСостояния()
{
источник вар;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Создаем экземпляр анализатора MSXML.
source.async = ложь;
source.load(sourceName); //Загрузить XML-документ
root = source.documentElement; //Установить элемент документа как элемент корневого узла;
sortField=root.selectNodes(" //@name "); //Ищем все узлы, атрибуты которых содержат имя
for(var i=0;i {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ВыбратьГород();
}

Пользовательская функция: ChooseCity
(Прочитайте соответствующее название города в XML-данных на основе текущего выбранного названия провинции и добавьте его в раскрывающийся список SelCity)
функцияВыбор города()
{
x=form1.SelState.selectedIndex; //Читаем текущие параметры раскрывающегося списка провинции
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Ищем все узлы города в узле State, значение атрибута имени которого равно параметру y
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Отменяем исходный элемент списка
{
form1.SelCity.options.remove(i)
}
for(var i=0;i {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}

Исходный код формы