Динамические выпадающие списки

Существует несколько различных способов создания динамических выпадающих списков. Например многостраничная форма, когда в зависимости от выбранной опции на следующей странице с сервера загружается новый список с соответствующими значениями. Недостатки использования подобного метода очевидны: необходимо обращаться к серверу и выполнять некий скрипт, уходит время на загрузку новой страницы с новыми значениями и т.п. Можно использовать XMLHttpRequest для того, чтобы не тянуть всю страницу с сервера, а только некоторую ее часть. Однако, при его использовании также вероятны задержки загрузки нового списка опций.

Можно уменьшить время изменения значений списков, если возложить эту задачу на сторону клиента и задействовать серверный скрипт лишь для обработки уже заполненной формы. Например, можно использовать JavaScript и хранить все значения списков и отношения между ними в массиве. При этом, для избежания проблем с отключенным в браузере JavaScript придется дублировать значения списков в скрипте и html-разметке, при этом начинаются сложности с возможным изменением значений списков и увеличивается объем кода.

Однако, вышеописанных трудностей можно избежать и сделать динамически изменяемые списки, обрабатываемые на стороне клиента (браузером). При этом не требуется обращения к серверу при каждом выборе значений списка, а также значения в списках можно будет выбирать и при отключенном JavaScript. Разумеется, в таком случае нарушатся отношения между значениями, зато в списках остается возможность выбора этих значений. А это означает, что работоспособность формы сохраняется не зависимо от возможности выполнения клиентских скриптов, без затрат на соединение с сервером и выполнение серверных скриптов.

Порядок действий будет таким:

  • Нужно сделать html-разметку страницы. Написать выпадающие списки (select). Такая страница будет почти одинаково выглядеть практически в любом браузере при соблюдении правил разметки. На этом этапе не требуется применения каких-либо действий или стилей к элементам выпадающих списков.
  • Теперь надо добавить к разметке несколько id и class. Это может изменить внешний вид, но еще не дает возможности производить какие-либо действия при изменении значений списков.
  • Следующим этапом оставляем разметку и контент, переходим к обработчику. Берем код JavaScript, размещаем его во внешнем файле скрипта, подключаем его к странице и выполняем сразу после ее загрузки.
  • Перед применением кода скрипта не забываем проверить: может ли браузер его выполнить? Т.е. проверка на поддержку браузером JavaScript/DOM. И в лучшем случае получаем полностью работоспособные динамически изменяемые списки. В худшем случае получаем обычные не взаимосвязанные списки, которые все-равно остаются работоспособными, хотя уже не такими удобными.

Разметка - основа примера.

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


<form action="#" method="post">
 <select name="Country">
  <option value="select">Выберите страну...</option>
  <option value="Russia">Россия</option>
  <option value="Ukraine">Украина</option>
  <option value="Belarus">Беларусь</option>
 </select>
 <select name="City">
  <option value="select">Выберите город...</option>
  <option value="Moscow">Москва</option>
  <option value="SPeterburg">Санкт-Петербург</option>
  <option value="Ekaterinburg">Екатеринбург</option>
  <option value="Kiev">Киев</option>
  <option value="Sevastopol">Севастополь</option>
  <option value="Minsk">Минск</option>
  <option value="Bobruisk">Бобруйск</option>
 </select>
</form>

Следующим шагом будет добавление некоторых атрибутов class и id элементам списков. Сперва добавим уникальные id для select, чтобы можно было легко обращаться к каждому из них. Затем нужно установить отношения между списками. Каждому элементу списка городов нужно добавить атрибут class, значение которого должно быть таким же, как значение атрибута value у элементов списка стран.

Тут следует сделать небольшое отступление на тему использования атрибута class. Дело в том, что он, хотя и должен использоваться для связи с таблицами стилей, является единственным из возможных атрибутов элемента option, со значением которого можно достаточно свободно обращаться. Поэтому для решения поставленной задачи с соблюдением правил разметки используется именно он.

На этом можно закончить с разметкой, которая теперь будет выглядеть так:


<form action="#" method="post">
 <select name="Country" id="Country">
  <option value="select">Выберите страну...</option>
  <option value="Russia">Россия</option>
  <option value="Ukraine">Украина</option>
  <option value="Belarus">Беларусь</option>
 </select>
 <select name="City" id="City">
  <option class="select" value="select">Выберите город...</option>
  <option class="Russia" value="Moscow">Москва</option>
  <option class="Russia" value="SPeterburg">Санкт-Петербург</option>
  <option class="Russia" value="Ekaterinburg">Екатеринбург</option>
  <option class="Ukraine" value="Kiev">Киев</option>
  <option class="Ukraine" value="Sevastopol">Севастополь</option>
  <option class="Belarus" value="Minsk">Минск</option>
  <option class="Belarus" value="Bobruisk">Бобруйск</option>
 </select>
</form>

JavaScript - двигатель примера.

Самый простой способ динамически изменить список — скрыть ненужные и показать нужные элементы. Все было бы хорошо и просто, если бы все браузеры могли адекватно применить конструкцию style.display для option. Поэтому, этот вариант придется отложить до лучших времен.

Объектная Модель Документа (DOM) позволяет легко и просто обращаться к элементам разметки, производить с ними какие-нибудь действия: удалять, создавать новые, копировать, клонировать и т.п.

Клонирование, как это будет выглядеть и что с этим можно сделать? Как только страница будет загружена браузером, с помощью скрипта клонируется динамически изменяемый второй список (в этом примере - список городов) и этот клон остается в памяти. Затем при загрузке страницы (событие onload) либо при выборе значения первого статичного списка (событие onchange для списка стран), список городов будет удаляться и, затем, будет создаваться новый список, состоящий из городов, принадлежащих выбранной стране из первого списка. Элементы option для динамического списка выбранных городов будут браться из клонированных ранее.

function dynamicSelect(id1, id2) {
// Сперва необходимо проверить поддержку W3C DOM в браузере
 if (document.getElementById && document.getElementsByTagName) {
// Определение переменных, ссылающихся на списки
  var sel1 = document.getElementById(id1);
  var sel2 = document.getElementById(id2);
// Клонирование динамического списка
  var clone = sel2.cloneNode(true);
// Определение переменных для клонированных элементов списка
  var clonedOptions = clone.getElementsByTagName("option");
// Вызов функции собирающей вызываемый список
  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// При изменении выбранного элемента в первом списке:
// вызов функции пересобирающей вызываемый список
  sel1.onchange = function() {
  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  }
 }
}
// Функция для сборки динамического списка
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
// Удаление всех элементов динамического списка
 while (sel2.options.length) {
  sel2.remove(0);
 }
 var pattern1 = /( |^)(select)( |$)/;
 var pattern2 = new RegExp("( |^)
          (" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Перебор клонированных элементов списка
 for (var i = 0; i < clonedOptions.length; i++) {
// Если название класса клонированного option эквивалентно "select"
// либо эквивалентно значению option первого списка
  if (clonedOptions[i].className.match(pattern1) ||
  clonedOptions[i].className.match(pattern2)) {
// его нужно клонировать в динамически создаваемый список
   sel2.appendChild(clonedOptions[i].cloneNode(true));
  }
 }
}
// Вызов скрипта при загрузке страницы
window.onload = function() {
	dynamicSelect("Country", "City");
}

Вот собственно и все!
Живой работающий пример можно посмотреть здесь. Разумеется, все было бы не так интересно, если рассматривать возможность динамического изменения только одного списка. Логично продолжить, например, добавив третий список, как здесь. Или если на странице будет две пары списков, как здесь. При этом все примеры используют один и тот же JavaScript.

Спасибо Bobby van der Sluis!



Много комментариев (32) к “Динамические выпадающие списки”

  1. Teo :

    У вас в алгоритме ошибочка маленькая вот тут: http://xhtml.ru/examples/dynamicselect/examp1.html

    Приведу алгоритм, к ней приводящий:

    Выбираем в первом списке, допустим, A
    Выбираем в втором списке, допустим, A-A
    И в третьем списке выбираем, допустим, A-A-A
    Теперь меняем значение в первом списке, например, на B
    После этого третий список не «обнуляется»…

    Мелочь, конечно…
    Да и раз я уж тут, то хочу поблагодарить вас за ресурс. Спасибо ;)


  2. AKS :

    Можно, наверно, по умолчанию прятать первый список, чтобы при отключенном JS он не мешался. А JS будет его делать видимым. Это, конечно, применимо только для данного случая (со странами и городами)…


  3. Eddi :

    Идея интересная, но
    попытка разобраться в коде споткнулась об ошибку в строке :
    (” + sel1.options[sel1.selectedIndex].value + “)( |$)”).

    Если не сложно , можно ли увидеть исхоный рабочий код ?


  4. Fixer :

    Когда списки реально содержат страны и города (а ещё могут содежать регионы), то всё это чушь.

    Название поста не соответствует содержанию, это не динамические списки, что здесь подругается??

    Фишка копирования тупых постов не делает чести вашему ресурсу.


  5. Баранов Андрей :

    Для Eddi: в последнем абзаце есть ссылки на исходники.


  6. Bond :

    Ваш код как раз кстати, то что я искал!
    Большое спасибо Вам и вашему гуманизму, не каждый найдёт время и желание “поделиться с ближним”!
    Реализация кода будет использована на сайте http://www.flat.net.ua


  7. Bond :

    Для Fixer :
    Наиболее проще обсуждать предоставленный код с отрицательной стороны, что соответствует нашему менталитету, гораздо труднее предложить свой вариант решение данного, обсуждаемого вопроса, что в итоге послужило бы аргументом для оценки Ваших способностей в данной сфере разработки. Слово – Дело!


  8. Wizard :

    Bond: Слушай, я позвонил по телефону 555555, и мне никто не хотел продать 222 кв.метровую квартиру за $50 штук, как же так!? Оптимистичный у Вас сайт =)


  9. Илья :

    Присоеденяюсь к Бонд -, спасибо за материал! Только вот 1 вопрос есть: как данній скрипт подружить с selected? Т.е. указать, какой город, к примеру, должен выбираться по умолчанию?


  10. Мишук :

    Привет!
    Очень долго искал что-нибудь подобное! Огромное спасибо!

    Правда в процессе работы возникли такие вопросы:

    1. Если второй селект имеет 200 записей (а таких селектов допустим 20) – имеем немеряное (4000) количество опшенов. В связи с этим размер страницы увеличевается многократно. Нельзя ли каким-то образом подгружать списки из файла?

    2. Допустим есть три селекта. Как сделать, чтобы при выборе в первом, в двух других появлялся один и тот же набор опшенов?

    Думаю данные вопросы будут актуальны для многих посетителей. Заранее благодарен за возможные варианты.

    И еще хотелось бы увидеть пару других скриптов для выполнения этой же цели.

    Салют!


  11. Wizard :

    Итак, у нас будет файл jscript и html документ.
    Как и на сайте, будем иметь дело со странами на материках. Но стран будет
    много.
    Начнём со скрипта.
    Используя скрипт, нельзя одновременно задавать event тегу body, такие, как
    onload.
    Файл скрипта лучше всего подключать внутри тега head
    <script src="PATH TO SCRIPT/countryselect.js"
    type="text/javascript"></script>
    Комментарии на английском, прошу прощения.

    var contin = new Array(); //each cell will hold an array of all the
    //countries in a continent
    var numincont = new Array('0','51','2','47','15','42','27','15'); //number
    //of countries in each continent
    //prepare the continent arrays
    for( var z = 1; z < numincont.length; z++ ) { contin[z] = new Array(); }
    //tell it to set up the select menu when the page loads
    window.onload = myprep;
    function myprep() {
    //Because Netscape 4 will act strangely on reloading . . .
    if( document.mainform.Country.options.length < 60 ) { self.location.reload();
    }
    //now that the document has fully loaded, take out all of the countries and
    //put them into
    //an array representing that continent (the continent arrays)
    var y = 1; //y = number of options to bypass at the start - 1
    for( var z = 1; z < numincont.length; z++ ) {
    //each continent in turn. start at 1 because options[0] is 'Please select
    //one'
    for( x = 1; x <= numincont[z]; x++ ) {
    //insert countries into arrays
    contin[z][x] = new Option(document.mainform.Country.options[x+y].text, document.mainform.Country.options[x+y].value);
    }
    //offset by the number we have already done
    y += numincont[z] + 1; //the 1 allows for the ' ------ Continent
    //name ------' options
    }
    refillme();
    }
    function refillme() {
    //erase the select menu then refill it with all countries from the selected
    //continent
    //the reason I deconstruct then reconstruct is to allow non JavaScript
    //browsers to work
    while( document.mainform.Country.options.length ) { document.mainform.Country.options[0] = 'null'; }
    if( document.mainform.Continent.selectedIndex ) {
    //they have selected a continent. insert a 'Please select one' option
    document.mainform.Country.options[0] = new Option("Please select one","");
    for( var z = 1; z < contin[document.mainform.Continent.selectedIndex].length; z++ ) {
    //for the selected continent, put in each country
    document.mainform.Country.options[z] = contin[document.mainform.Continent.selectedIndex][z];
    }
    //give them an 'Other' option and enable the select menu (if it was
    //disabled)
    document.mainform.Country.options[z] = new Option("Other (please use the box below)","Other");
    document.mainform.Country.disabled = 'false';
    } else {
    //wait for them to select a continent
    document.mainform.Country.options[0] = new Option("Please select an area above","");
    document.mainform.Country.disabled = 'true';
    }
    document.mainform.Country.options[0].selected = 'true';
    document.mainform.other.disabled = 'true';
    }
    function ableother() {
    //If they have selected "other", enable the "other" box
    if( document.mainform.Country.options.length > 1 && document.mainform.Country.selectedIndex == document.mainform.Country.options.length - 1 ) {
    document.mainform.other.disabled = 'false';
    } else {
    document.mainform.other.disabled = 'true';
    }
    }
    /'_______________________________________________________________________________________
    The continent menu:
    <select name="Continent" size="1"
    onChange="if(!window.refillme){return;}refillme();">
    <option selected>Please select one</option>
    <option value="Africa">Africa</option>
    <option value="Antarctica">Antarctica (just in case)</option>
    <option value="Asia">Asia</option>
    <option value="Australasia">Australasia</option>
    <option value="Europe">Europe</option>
    <option value="North_America">North America</option>
    <option value="South_America">South America</option>
    </select>
    The countries menu:
    <select name="Country" size="1"
    onchange="if(!window.ableother){return;}ableother();">
    <option selected>Please select one</option>
    <!-- The countries for Africa -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Africa
    ------</option>
    <option value="Algeria">Algeria</option>
    <option value="Angolia">Angolia</option>
    <option value="Benin">Benin</option>
    <option value="Botswana">Botswana</option>
    <option value="Burkina">Burkina</option>
    <option value="Burundi">Burundi</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Central_African_Republic">Central African Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chana">Chana</option>
    <option value="Comoros_Is.">Comoros Is.</option>
    <option value="Congo">Congo</option>
    <option value="Congo_(Zaire)">Congo (Zaire)</option>
    <option value="Cote_D'Ivoire">Cote D'Ivoire</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Egypt">Egypt</option>
    <option value="Equatorial_Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Gabon">Gabon</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea_Bissau">Guinea Bissau</option>
    <option value="Kenya">Kenya</option>
    <option value="Lesotho">Lesotho</option>
    <option value="Liberia">Liberia</option>
    <option value="Libya">Libya</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Mali">Mali</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Namibia">Namibia</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Sao_Tomi_and_Principe">Sao Tomi and Principe</option>
    <option value="Senegal">Senegal</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra_Leone">Sierra Leone</option>
    <option value="Somalia">Somalia</option>
    <option value="South_Africa_Rep.Of">South Africa Rep.Of</option>
    <option value="Sudan">Sudan</option>
    <option value="Swaziland">Swaziland</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Togo">Togo</option>
    <option value="Uganda">Uganda</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
    <!-- Then the countries for Antarctica -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Antarctica ------</option>
    <option value="Antarctica">Mainland Antarctica</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <!-- Then the countries for Asia -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Asia
    ------</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Armenia">Armenia</option>
    <option value="Azerbaijan">Azerbaijan</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Brunei">Brunei</option>
    <option value="Cambodia">Cambodia</option>
    <option value="China">China</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Georgia">Georgia</option>
    <option value="Iran">Iran</option>
    <option value="Iraq">Iraq</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Israel">Israel and Gaza</option>
    <option value="Japan">Japan</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakstan">Kazakstan</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgzstan">Kyrgzstan</option>
    <option value="Laos">Laos</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Myanmar_(Burma)">Myanmar (Burma)</option>
    <option value="Nepal">Nepal</option>
    <option value="North_Korea">North Korea</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Phillipines">Phillipines</option>
    <option value="Quatar">Quatar</option>
    <option value="Russian_Federation">Russian Federation</option>
    <option value="Saudi_Arabia">Saudi Arabia</option>
    <option value="South_Korea">South Korea</option>
    <option value="Sri_Lanka">Sri Lanka</option>
    <option value="Syria">Syria</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Tajikstan">Tajikstan</option>
    <option value="Thailand">Thailand</option>
    <option value="Turkey">Turkey</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="United_Arab_Emirates">United Arab Emirates</option>
    <option value="Uzbekistan">Uzbekistan</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Yemen">Yemen</option>
    <!-- Then the countries for Australasia -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Australasia
    ------</option>
    <option value="Australia">Australia</option>
    <option value="Fiji">Fiji</option>
    <option value="France_(Islands_only)">France (Islands only)</option>
    <option value="Kiribati">Kiribati</option>
    <option value="Marshall_Islands">Marshall Islands</option>
    <option value="Micronesia_F_S_O">Micronesia, F.S.O</option>
    <option value="Nauru">Nauru</option>
    <option value="New_Zealand">New Zealand</option>
    <option value="Papua_New_Guinea">Papua New Guinea</option>
    <option value="Solomon_Islands">Solomon Islands</option>
    <option value="Tonga">Tonga</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Western_Samoa">Western Samoa</option>
    <!-- Then the countries for Europe -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Europe
    ------</option>
    <option value="Albania">Albania</option>
    <option value="Andorra">Andorra</option>
    <option value="Austria">Austria</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Bosnia_Herzegovina">Bosnia-Herzegovina</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Cape_Verde">Cape Verde</option>
    <option value="Croatia">Croatia</option>
    <option value="Czech_Republic">Czech Republic</option>
    <option value="Denmark_and_Greenland">Denmark and Greenland</option>
    <option value="Estonia">Estonia</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Greece">Greece</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="Ireland">Ireland Rep.Of</option>
    <option value="Italy">Italy</option>
    <option value="Latvia">Latvia</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Macedonia">Macedonia</option>
    <option value="Malta">Malta</option>
    <option value="Moldova">Moldova</option>
    <option value="Netherlands">Netherlands</option>
    <option value="Norway">Norway</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Romania">Romania</option>
    <option value="Russian_Federation">Russian Federation</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Spain">Spain</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Turkey">Turkey</option>
    <option value="Ukraine">Ukraine</option>
    <option value="UK">United Kingdom</option>
    <option value="Yugoslavia">Yugoslavia</option>
    <!-- Then the countries for North America -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ America
    ------</option>
    <option value="Antigua_and_Barbuda">Antigua and Barbuda</option>
    <option value="Barbados">Barbados</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Belize">Belize</option>
    <option value="Canada">Canada</option>
    <option value="Costa_Rica">Costa Rica</option>
    <option value="Cuba">Cuba</option>
    <option value="Dominica">Dominica</option>
    <option value="Dominican_Republic">Dominican Republic</option>
    <option value="El_Salvador">El Salvador</option>
    <option value="France_Is">France (Islands only)</option>
    <option value="Greenland_(Denmark)">Greenland (Denmark)</option>
    <option value="Grenada">Grenada</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Mexico">Mexico</option>
    <option value="Netherlands_Is">Netherlands (Islands only)</option>
    <option value="Pacific_Islands_Inc._Hawaii">Pacific Islands Inc.
    Hawaii</option>
    <option value="Panama">Panama</option>
    <option value="St_Kitts-Nevis">St Kitts-Nevis</option>
    <option value="St_Lucia">St Lucia</option>
    <option value="St_Vincent_and_the_Grenadines">St Vincent and the
    Grenadines</option>
    <option value="Trinidad_and_Tobago">Trinidad and Tobago</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="USA">United States Of America</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
    <!-- Then the countries for South America -->
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil">Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="French_Guiana">French Guiana</option>
    <option value="Guyana">Guyana</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
    <!-- Then the countries I might have missed -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Other
    ------</option>
    <option value="Other">Other (please use the box below)</option>
    </select>
    The 'other' box
    <input type="text" name="other" value="Use this for other" size="20">
    '/

    Далее следует форма, куда и войдут представленные выше silect’ы:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
    http://www.w3.org/TR/html4/strict.dtd"&gt;
    <html>
    <head>
    <title>CountrySelection</title>
    <script src="PATH TO SCRIPT/countryselect.js"
    type="text/javascript"></script>
    </head>
    <body>
    form method="get" action="/tutorials/">
    <p>
    <input type="text" name="searchstring" value="" class="searchbybut">
    <input type="Submit" value="Search" class="searchbut">
    <input type="hidden" name="searchIn[jslibs]" value="1">
    </p>
    </form>
    <h3>Site navigation</h3>
    <ul>
    <li><a href="/">How To Create home</a></li>
    <li><a href="/jslibs/">JavaScript libraries</a></li>
    <li><a href="/tutorials/javascript/examples">JavaScript tutorial</a></li>
    <li><a href="/jslibs/termsOfUse.html">Script license</a></li>
    </ul>
    <h3>Details and download</h3>
    <ul>
    <li><a href="/jslibs/script-countryselect">Continent country
    selector</a></li>
    </ul>
    </div>
    <div id="content">
    <h2>Providing the correct countries for a continent</h2>
    <p>
    If you do not permit (or support) JavaScript, the countries menu will
    simply
    display all countries as well as continent headings.
    </p>
    <form method="post" name="mainform" action="formman.html">
    <p>
    Select a continent or area
    <br>
    <select name="Continent" size="1"
    onChange="if(!window.refillme){return;}refillme();">
    <option selected>Please select one</option>
    <option value="Africa">Africa</option>
    <option value="Antarctica">Antarctica (just in case)</option>
    <option value="Asia">Asia</option>
    <option value="Australasia">Australasia</option>
    <option value="Europe">Europe</option>
    <option value="North_America">North America</option>
    <option value="South_America">South America</option>
    </select>
    </p>
    <p>
    Select a country (ok, so some of them aren't strictly countries but I
    don't care)
    <br>
    <!-- here are the country menus -->
    <!-- Firstly, the countries for none -->
    <select name="Country" size="1"
    onchange="if(!window.ableother){return;}ableother();">
    <option selected>Please select one</option>
    <!-- The countries for Africa -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Africa
    ------</option>
    <option value="Algeria">Algeria</option>
    <option value="Angolia">Angolia</option>
    <option value="Benin">Benin</option>
    <option value="Botswana">Botswana</option>
    <option value="Burkina">Burkina</option>
    <option value="Burundi">Burundi</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Central_African_Republic">Central African
    Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chana">Chana</option>
    <option value="Comoros_Is.">Comoros Is.</option>
    <option value="Congo">Congo</option>
    <option value="Congo_(Zaire)">Congo (Zaire)</option>
    <option value="Cote_D'Ivoire">Cote D'Ivoire</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Egypt">Egypt</option>
    <option value="Equatorial_Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Gabon">Gabon</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea_Bissau">Guinea Bissau</option>
    <option value="Kenya">Kenya</option>
    <option value="Lesotho">Lesotho</option>
    <option value="Liberia">Liberia</option>
    <option value="Libya">Libya</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Mali">Mali</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Namibia">Namibia</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Sao_Tomi_and_Principe">Sao Tomi and Principe</option>
    <option value="Senegal">Senegal</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra_Leone">Sierra Leone</option>
    <option value="Somalia">Somalia</option>
    <option value="South_Africa_Rep.Of">South Africa Rep.Of</option>
    <option value="Sudan">Sudan</option>
    <option value="Swaziland">Swaziland</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Togo">Togo</option>
    <option value="Uganda">Uganda</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
    <!-- Then the countries for Antarctica -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Antarctica
    ------</option>
    <option value="Antarctica">Mainland Antarctica</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <!-- Then the countries for Asia -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Asia
    ------</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Armenia">Armenia</option>
    <option value="Azerbaijan">Azerbaijan</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Brunei">Brunei</option>
    <option value="Cambodia">Cambodia</option>
    <option value="China">China</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Georgia">Georgia</option>
    <option value="Iran">Iran</option>
    <option value="Iraq">Iraq</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Israel">Israel and Gaza</option>
    <option value="Japan">Japan</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakstan">Kazakstan</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgzstan">Kyrgzstan</option>
    <option value="Laos">Laos</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Myanmar_(Burma)">Myanmar (Burma)</option>
    <option value="Nepal">Nepal</option>
    <option value="North_Korea">North Korea</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Phillipines">Phillipines</option>
    <option value="Quatar">Quatar</option>
    <option value="Russian_Federation">Russian Federation</option>
    <option value="Saudi_Arabia">Saudi Arabia</option>
    <option value="South_Korea">South Korea</option>
    <option value="Sri_Lanka">Sri Lanka</option>
    <option value="Syria">Syria</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Tajikstan">Tajikstan</option>
    <option value="Thailand">Thailand</option>
    <option value="Turkey">Turkey</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="United_Arab_Emirates">United Arab Emirates</option>
    <option value="Uzbekistan">Uzbekistan</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Yemen">Yemen</option>
    <!-- Then the countries for Australasia -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Australasia
    ------</option>
    <option value="Australia">Australia</option>
    <option value="Fiji">Fiji</option>
    <option value="France_(Islands_only)">France (Islands only)</option>
    <option value="Kiribati">Kiribati</option>
    <option value="Marshall_Islands">Marshall Islands</option>
    <option value="Micronesia_F_S_O">Micronesia, F.S.O</option>
    <option value="Nauru">Nauru</option>
    <option value="New_Zealand">New Zealand</option>
    <option value="Papua_New_Guinea">Papua New Guinea</option>
    <option value="Solomon_Islands">Solomon Islands</option>
    <option value="Tonga">Tonga</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Western_Samoa">Western Samoa</option>
    <!-- Then the countries for Europe -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Europe
    ------</option>
    <option value="Albania">Albania</option>
    <option value="Andorra">Andorra</option>
    <option value="Austria">Austria</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Bosnia_Herzegovina">Bosnia-Herzegovina</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Cape_Verde">Cape Verde</option>
    <option value="Croatia">Croatia</option>
    <option value="Czech_Republic">Czech Republic</option>
    <option value="Denmark_and_Greenland">Denmark and Greenland</option>
    <option value="Estonia">Estonia</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Greece">Greece</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="Ireland">Ireland Rep.Of</option>
    <option value="Italy">Italy</option>
    <option value="Latvia">Latvia</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Macedonia">Macedonia</option>
    <option value="Malta">Malta</option>
    <option value="Moldova">Moldova</option>
    <option value="Netherlands">Netherlands</option>
    <option value="Norway">Norway</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Romania">Romania</option>
    <option value="Russian_Federation">Russian Federation</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Spain">Spain</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Turkey">Turkey</option>
    <option value="Ukraine">Ukraine</option>
    <option value="UK">United Kingdom</option>
    <option value="Yugoslavia">Yugoslavia</option>
    <!-- Then the countries for North America -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ America
    ------</option>
    <option value="Antigua_and_Barbuda">Antigua and Barbuda</option>
    <option value="Barbados">Barbados</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Belize">Belize</option>
    <option value="Canada">Canada</option>
    <option value="Costa_Rica">Costa Rica</option>
    <option value="Cuba">Cuba</option>
    <option value="Dominica">Dominica</option>
    <option value="Dominican_Republic">Dominican Republic</option>
    <option value="El_Salvador">El Salvador</option>
    <option value="France_Is">France (Islands only)</option>
    <option value="Greenland_(Denmark)">Greenland (Denmark)</option>
    <option value="Grenada">Grenada</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Mexico">Mexico</option>
    <option value="Netherlands_Is">Netherlands (Islands only)</option>
    <option value="Pacific_Islands_Inc._Hawaii">Pacific Islands Inc.
    Hawaii</option>
    <option value="Panama">Panama</option>
    <option value="St_Kitts-Nevis">St Kitts-Nevis</option>
    <option value="St_Lucia">St Lucia</option>
    <option value="St_Vincent_and_the_Grenadines">St Vincent and the
    Grenadines</option>
    <option value="Trinidad_and_Tobago">Trinidad and Tobago</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="USA">United States Of America</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
    <!-- Then the countries for South America -->
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil">Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="French_Guiana">French Guiana</option>
    <option value="Guyana">Guyana</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="UK_Is">United Kingdom (Islands only)</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
    <!-- Then the countries I might have missed -->
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ------ Other
    ------</option>
    <option value="Other">Other (please use the box below)</option>
    </select>
    </p>
    <p>
    <input type="text" name="other" value="Use this for other" size="20">
    </p>
    </form>
    </body>
    </html>


  12. Wizard :

    Спасибо, что исправили мой “маленький” комментарий!


  13. Bond :

    Наиболее профессиональными , на мой взгляд, будут динамические списки на language=”JavaScript”, для 3-х SELECT-ов. Есть перечень преимуществ, и одно из них – «вес страницы», правда есть и недостаток: при отключении пользователем “JavaScript”,
    2-а SELECT-а превращаются в

    CountrySelection in http://www.flat.net.ua

    var makesPropertyStrPref = ’search’;
    var countryStrPref = ’sr_country’;
    var areaStrPref = ’sr_area’;
    var stateStrPref = ’sr_state’;
    var isSearch = 1;
    var defaultProperty = ”;
    var entryChoose = ‘Выберите…’;
    var entryOthers = ‘другой’;
    var entryAll = ‘все’;

    Страна

    Выберите…
    – Украина
    – Россия
    – Беларусь
    other

    document.write (’Город-Регион’);

    document.write(”");

    Город-Регион

    document.write (’Район’);

    document.write(”");

    Район

    //————————scriptz.js—————–
    function makeSelected(formNameStr, select1NameStr, select2NameStr, isSearch) {
    var iter;
    var select1Select = document.forms[formNameStr].elements[select1NameStr];
    var select2Select = document.forms[formNameStr].elements[select2NameStr];
    if (typeof(property[select1Select.value])==’string’) {
    var select2Data = property[select1Select.value].split(’#');
    var select2List = select2Data[0].split(’;');
    if ((select2Data.length > 1) && (isSearch == 1)) {
    var select2Index = new Array();
    for (iter = 0; iter 0) {
    var kidsPipeList = item.split(’,')[0];
    var groupName = item.split(’,')[1];
    var kids = kidsPipeList.split(’|');
    var toAdd = kidsPipeList + “,” + groupName + ” (__ALL__)”;
    select2List[counter] = toAdd;
    counter++;
    for (jter = 0; jter (sr_country.value=”UA”)
    //массив для (sr_area.value=”40000″)
    //индекс массива, используется также для Почтового Индекса в форме
    var property = new Array();
    property["UA"]=’40000,Киев;43000,Луцк;Ровно,Ровно;Тернополь,Тернополь;1,OTHER;’;
    property["40000"]=’2,Дарницкий;3,Голосеевский;1,OTHER;’;
    property["43000"]=’43026,40-й квартал;3,Центр;1,OTHER;’;
    property["RUS"]=’2,Москва 33;3,Астрахань;1,OTHER;’;
    property["BY"]=’4,Минск;1,OTHER;’;
    //————————-all and——————-
    Всё выше опубликованное разработано специально для ресурса http://www.flat.net.ua.
    Буду рад критике, замечаниям, благодарностям.


  14. Bond :

    Наиболее профессиональными , на мой взгляд, будут динамические списки на language="JavaScript", для 3-х SELECT-ов. Есть перечень преимуществ, и одно из них - «вес страницы», правда есть и недостаток: при отключении пользователем "JavaScript",
    2-а SELECT-а превращаются в

    CountrySelection in http://www.flat.net.ua

    var makesPropertyStrPref = 'search';
    var countryStrPref = 'sr_country';
    var areaStrPref = 'sr_area';
    var stateStrPref = 'sr_state';
    var isSearch = 1;
    var defaultProperty = '';
    var entryChoose = 'Выберите...';
    var entryOthers = 'другой';
    var entryAll = 'все';

    Страна

    Выберите...
    -- Украина
    -- Россия
    -- Беларусь
    other

    document.write ('Город-Регион');

    document.write("");

    Город-Регион

    document.write ('Район');

    document.write("");

    Район

    //------------------------scriptz.js-----------------
    function makeSelected(formNameStr, select1NameStr, select2NameStr, isSearch) {
    var iter;
    var select1Select = document.forms[formNameStr].elements[select1NameStr];
    var select2Select = document.forms[formNameStr].elements[select2NameStr];
    if (typeof(property[select1Select.value])=='string') {
    var select2Data = property[select1Select.value].split('#');
    var select2List = select2Data[0].split(';');
    if ((select2Data.length > 1) && (isSearch == 1)) {
    var select2Index = new Array();
    for (iter = 0; iter 0) {
    var kidsPipeList = item.split(',')[0];
    var groupName = item.split(',')[1];
    var kids = kidsPipeList.split('|');
    var toAdd = kidsPipeList + "," + groupName + " (__ALL__)";
    select2List[counter] = toAdd;
    counter++;
    for (jter = 0; jter (sr_country.value="UA")
    //массив для (sr_area.value="40000")
    //индекс массива, используется также для Почтового Индекса в форме
    var property = new Array();
    property["UA"]='40000,Киев;43000,Луцк;Ровно,Ровно;Тернополь,Тернополь;1,OTHER;';
    property["40000"]='2,Дарницкий;3,Голосеевский;1,OTHER;';
    property["43000"]='43026,40-й квартал;3,Центр;1,OTHER;';
    property["RUS"]='2,Москва 33;3,Астрахань;1,OTHER;';
    property["BY"]='4,Минск;1,OTHER;';
    //-------------------------all and-------------------
    Всё выше опубликованное разработано специально для ресурса http://www.flat.net.ua.
    Буду рад критике, замечаниям, благодарностям.


  15. Bond :

    Прямой код не пренимает, а времени переписывать с XHTML нет, т.ч. если комку надо пишите , скину на мыло (admin@flat.net.ua).


  16. dark-demon :

    мда,товарищи,.. вам не жалко пользователей, которые будут грузить килобайты ненужной им информации?

    правильных вариантов всего 2:
    1. убрать селект и поставить инпут. набрать текст руками гораздо проще, чем ковряться в куче списков.
    2. реализовать честную подгрузку.задержки между страницами – ничто по сравнению с задержкой перед загрузкой страницы, содержащей невменяемоего количество опшенов.


  17. SlaDER :

    Лучше всего использовать ajax правда документации, не так много с хорошими примерами.


  18. Master (ruslan) :

    Как раз искал такой скрипт, огромное спасибо Вам!


  19. Master (ruslan) :

    Хотелось бы исправления ошибки, описанной в самом первом комментарии.


  20. web-master :

    А зачем придумали Ajax? задержка при подгрузке нового списка уменьшает на порядок время по сравнению с приведенным примером


  21. рулевой LoadingWeb.Ru :

    А вообще, Ajax можно втыкать в HTML на подобее java-script или там другие заморочки???


  22. Lorinser :

    а не могли бы кто-нить оставить пример состоящих не из 2 а из 5-6 динамических списков, где конечный выбор ведёт на нужную страницу.

    с примером естественно


  23. George :

    Предлагаю немного усовершенствовать, юзать class optgroup, в остальном так же. Будет удобно и тем, у кого жскрипт не пашет, и тем у кого пашет ;)


  24. Андрей :

    Отличное решение. Благодарствую. Да и вообще сайт полезным контентом наполнен, что очень радует.


  25. Александр :

    Здесь все понятно. Однако у меня возник такой вопрос:
    Допустим у нс 2 списка
    1) список городов (филиалов компании)
    2) и, например, список названий отделов компании

    как сделать так, чтобы в зависимости от города (не отдела) автоматически выбирался и адрес отправки (msk@name.com, spb@name.com)?


  26. viktop :

    Существует билиотека JsHttpRequest, позволяющая передавать информацию между клиентом-сервером без перезагрузки страницы (поддержиывается передачача таблиц и закачка файлов, есть возможность кэширования результатов запроса).

    Описаниек библиотеки http://dklab.ru/lib/JsHttpRequest/manual.html

    Топик по динамическомму формированию селектов http://forum.dklab.ru/js/jshttprequest/DinamicheskieSelect.html

    На доске объявлений http://www.torgall.ru я реализовал выбор места (край/район/город/район города) с помощью этой библиотеки.


  27. Кирюха :

    Интересно, а как реализовать построение уже “выбранного” списка ?

    Если первый список билдить в PHP, то тут все ясно, но если в том же PHP билдить второй селект с клчем в одном из option как selected, то при старте скрипта он тупо игнорирует правильно, подчеркиваю! , правильно выбранный пункт второго селекта.

    Все это происходит из-за refreshDynamicSelectOptions , но если это не использовать, то второй список до первого изменения будет содержать сразу все элементы. Но выбранный будет именно выбраным !

    Так что косяк =(


  28. Кирюха :

    В догонку к прошлому посту – глюк замечен на осле6, опера 9-я варит все нормально. на ФФ не тестилось.


  29. Oleg_AT :

    Select – это хорошо, но как быть если все варится в одном?!
    У меня задача следующая:
    1. делаю запрос на сервер MySQL, получаю массив, пусть q_method.
    2. формирую в скрипте динамический Select в цикле через
    addOption(objSel, q_method[k].text, k, true);

    А теперь главное!
    3. нужно в поле Select по первым символам ограничивать выборку в Select,
    чтоб пользованель вабрал из всего только частное.
    Т.е. изменять, как я понял, число Option в Select.
    На выходе получаем развернутый список вариантов. Чем бальще символов, тем
    меньше выборка.
    4.Если нет в q_method, а следовательно и выборки,
    то набрать полностью новую строку и далее ей обработать на сервере.
    P.S. дополнительная кнопка “добавить” не желательна!
    С уважением Олег


  30. Юрий :

    Спасибо за решение если возможно подскажите, как подружить второй список с Selected. Первый реагирует, а вот второй не хочет.


  31. lamour :

    А как сделать такое: есть главный один список и 10 второстепенных. В первом выбирается например компания, а в 10 второстепеных все одинаковые списки например отделов этой фирмы?


  32. Alex :

    Подскажите, пожалуйста, вариант для этого скрипта:
    a href=http://xhtml.ru/examples/dynamicselect/examp1.html с решенной проблемой window.onload() . не удобно ждать загрузки всего контента, а в javascript я пока плохо разбираюсь. сколько ни пытался переделать, ничего не получается. заранее благодарен!



22 queries 0.258 seconds.