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:16. |