Динамическое изменение контента на странице

При создании веб-страницы, довольно часто встает задача сделать блок динамически изменяющихся данных (при выборе значения в селекте, нажатии кнопки и т. д.).
Реализовать задачу можно несколькими способами. Обычно данные подгружаются с помощью Ajax или загружаются вместе со страницей в блоках DIV, затем отображаются/прячутся с помощю скрипта.
Хочу поделится приемом с которым знакомы далеко не все веб-мастера и позволяющим значительно сократить JS-код.
Допустим у нас есть список городов и связанные с ним данные (например о представительствах в данных городах).
Помещаем на страницу select со списком городов и устанавливаем ему обработчик onChange():

<SELECT id="city" onChange="CityChange()">
    <OPTION value="city_1">Москва</option>
    <OPTION value="city_2">Киев</option>
    <OPTION value="city_3">Минск</option>
</SELECT>

Помещаем на страницу неотображаемые данные о представителствах в блоках DIV:

<DIV id="city_1" style="display: none">Дом Правительства Российской Федерации</BR>г. Москва, Краснопресненская набережная, 2</DIV>
<DIV id="city_2" style="display: none">Дом правительства Украины</BR>г. Киев, ул. Грушевского 12/2</DIV>
<DIV id="city_3" style="display: none">Дом Правительства Республики Беларусь</BR>г. Минск, ул. Советская, 11</DIV>

Размещаем на странице блок, в котором и будут отображатся наши данные:

<DIV id="adress"></DIV>

Сама функция отображения данных выглядит довольно просто:

function CityChange()
{
document.getElementById('adress').innerHTML = document.getElementById(document.getElementById('city').value).innerHTML
}

Как видим, мы используем более простой и наглядный код. В блок DIV в котором мы хотим отобразить данные, мы просто подставляем данные из нужного нам блока. В случае, если мы хотим использовать jQuery функция будет выглядеть следующим образом:

function CityChange()
{
$("#adress").html($("#city_"+$("#city").options[this.selectedIndex].value).html())
}