мотивация:
Теперь давайте приведем небольшой пример применения XML в IE: решение проблемы связи двойных раскрывающихся меню. Возможно, наиболее распространенным примером является выбор провинции и последующее изменение параметров города, поэтому давайте попробуем использовать XML для завершения этого процесса.
Некоторые из функций, которые я представил ранее, были реализованы непосредственно с использованием файлов XML+XSL. Возможно, вы не очень хорошо знакомы с его использованием, поэтому на этот раз я буду использовать HMTL+XML, надеясь дать всем более четкое понимание: «XML может быть таким». простой!" :)
Материал:
С меню выбора объема XML связаны два файла: Citys.xml и CitySelect.htm.
Функции:
После выбора провинции соответствующий город может отображаться автоматически, что удобно для пользователей, эффективно улучшает взаимодействие с данными и делает вашу страницу более красочной.
Эффект:
Просмотреть здесь
Код:
Города.xml
<?xml version="1.0"coding="gb2312"?>
<Китай>
<State id="1" name="Цзянси">
<Город>Цзюцзян</Город>
<Город>Наньчан</Город>
<Город>Лушань</Город>
<Город>Циндэчжэнь</Город>
</Состояние>
<State id="2" name="Пекин">
<City>Западный Пекин</City>
<Город>Цзюёнгуань</Город>
<City>Сад Цинхуа</City>
<Город>Чжоукодянь</Город>
</Состояние>
<State id="3" name="Фуцзянь">
<Город>Фучжоу</Город>
<Город>Сямынь</Город>
<Город>Чжанчжоу</Город>
</Состояние>
<State id="4" name="Ганьсу">
<Город>Ланьчжоу</Город>
<Город>Ломен</Город>
<Город>Цзяюгуань</Город>
</Состояние>
<State id="5" name="Гуандун">
<Город>Гуанчжоу</Город>
<Город>Шэньчжэнь</Город>
<Город>Дунгуань</Город>
<City>Шипай</City>
</Состояние>
<State id="6" name="Аньхой">
<Город>Хэфэй</Город>
<Город>Хуаншань</Город>
<City>Коулун-Хилл</City>
<Город>Мааньшань</City>
</Состояние>
</China>
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<sortField.length;++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<sortField.length;++i) //Добавляем название города в раскрывающийся список
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
Исходный код формы
<BODY onLoad="ChooseState()">
<FORM action="" метод="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</ВЫБРАТЬ>
<SELECT name="SelCity" id="SelCity" >
</ВЫБРАТЬ>
</ФОРМ>
</BODY>
Постскриптум:
Когда я только начал изучать XML, у меня было такое же замешательство, как и у всех остальных: «Я выучил XML, но как мне его использовать?» Этот вопрос долго, очень долго меня преследовал...
Потому что электронная коммерция. и разработка программного обеспечения — моя специализация, я подумал, что лучше начать с того, с чем я лучше всего знаком. Поэтому я реализовал некоторые из наиболее часто используемых функций при создании веб-сайтов в XML. Вы тоже можете это сделать!