select menu, зависимый от другого select menu
здраствуите.
есть две "select element". нужно сделать например так: при выборе в первом "select element" страны, допустим Индия, в другом "select element" без перезагрузки страницы появились только города Индии, и соответственно, при выборе в первом "select element" страны, допустим Бразилия, в другом "select element" без перезагрузки страницы появились только города Бразилии. заранее благодарю. |
А в каком виде у вас хранятся эти данные? Страны и города.
Только хотел писать тему с подобным вопросом, решил не засорять форум, отпишусь в этой :) Решил пробовать хранить данные к примеру в таком виде: страна | город Украина | Киев Украина | Харьков Украина | Херсон Россия | Москва Россия | Краснодар и т.д. в первую форму select перечитываются значения до разделителя | а в зависимости от выбора значения в первом списке фильтруются значения второго. Но вот как реализовать пока не придумал :) Думаю такое простое решение уже кто-то реализовывал и не однократно. Заранее спасибо. |
поспешил с постом :)
за минуту нагуглил решение, думаю вам поможет: http://delajoom.ru/index.php/instrku...nennyje-select |
7up,
спасибо огромное :) |
Самописный вариант. Значениями элементов списка станут их порядковые номера (от нуля).
<select id = "sex"> <option value="m" selected>Мужчина</option> <option value="f">Женщина</option> <option value="x">Зверев</option> <option value="?">Другое</option><!-- Данных на это поле нет, соответственно, зависимый селект будет просто очищаться --> </select> <select id = "names"></select> <script> var dataObject = { "m": "Пётр,Василий,Сергей,Октавиан", "f": "Ирина,Светлана,Марина,Евгения", "x": "Гламур,Звезда,Шоумен,Куафёр" }; makeRelation = (function () { function change(slave, data){ var x, dataArray, option; slave.innerHTML = ""; if (!(this.value in data)){ return false; } dataArray = data[this.value].split(","); for(x = 0; x < dataArray.length; x++) { option = document.createElement("option"); option.value = String(x); option.innerHTML = dataArray[x]; slave.appendChild(option); } } return function (master, slave, data) { master.onchange = function () { change.call(this, slave, data); } master.onchange(); } })(); makeRelation(gid("sex"), gid("names"), dataObject); // Использование function gid(txt){ return document.getElementById(txt); } </script> Playground. |
значения валуе
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 08:29. |