01.01.2015, 19:32
|
|
Новичок на форуме
|
|
Регистрация: 01.01.2015
Сообщений: 6
|
|
|
4 взаимозависимых числовых select'a
С Новым годом, уважаемые форумчане!
Немного пошарив по форуму и просторам ру (и не только) нета, не смог разобраться с, казалось бы, простой задачкой. Оговорюсь сразу, что я только знакомлюсь с js, одновременно решаю реальную задачу, для реального проекта.
Суть задачи:
1. на форме имеем 4 <select> с <option> у первого со значениями от 1 до 9, у второго и третьего - от 0 до 8, у четвертого - от 0 до 2.
2. нужно отследить, чтоб при отправке формы (submit()) сумма значений всех 4 <select> не превышала 9.
3.Количество опций в селектах должно быть взаимозависимым, то есть при выборе в первом, например, значения 4, в остальных нужно запретить выбор значения, превышающего 5, дабы не превысить общей суммой число 9.
Конкретный пример - форма заказа авиабилета с категориями пассажиров (Взрослый, подросток, младенец, младенец без отдельно предоставленного места), естественно, сумма пассажиров в заказе не должна превысить 9.
Буду признателен любым подсказкам.
Спасибо!
|
|
01.01.2015, 19:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
|
|
01.01.2015, 20:36
|
|
Новичок на форуме
|
|
Регистрация: 01.01.2015
Сообщений: 6
|
|
Просто, иногда не хватает хорошего пинка в нужную сторону!
Спасибо! 
Ограничился пока что 3 селектами, вроде работает. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<select>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0" selected>0</option>
</select>
<select>
<option value="0" selected>0</option>
</select>
<script>
var select0 = document.getElementsByTagName('select')[0];
var select1 = document.getElementsByTagName('select')[1];
var select2 = document.getElementsByTagName('select')[2];
select0.addEventListener('change', function() {
var i = this.selectedIndex;
select1.options.length=0
select2.options.length=1
for (var k=0; k<9-i; k++) {
select1.options[k] = new Option(k, k);
}
select1.addEventListener('change', function() {
var i = this.selectedIndex + select0.selectedIndex;
select2.options.length=1
for (var k=0; k<9-i; k++) {
select2.options[k] = new Option(k, k);
}
});
});
</script>
</body>
</html>
|
|
01.01.2015, 22:35
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Symba87
|
Суть задачи:
1. на форме имеем 4 <select> с <option> у первого со значениями от 1 до 9, у второго и третьего - от 0 до 8, у четвертого - от 0 до 2.
2. нужно отследить, чтоб при отправке формы (submit()) сумма значений всех 4 <select> не превышала 9.
3.Количество опций в селектах должно быть взаимозависимым, то есть при выборе в первом, например, значения 4, в остальных нужно запретить выбор значения, превышающего 5, дабы не превысить общей суммой число 9.
Конкретный пример - форма заказа авиабилета с категориями пассажиров (Взрослый, подросток, младенец, младенец без отдельно предоставленного места), естественно, сумма пассажиров в заказе не должна превысить 9.
|
<div></div>
<script>
function createDependableSelects(obj) {
obj.selectPointsArray.map(function(spa, index, mas) {
spa.select = document.createElement("select");
for ( var i = 0, length = spa.end - spa.start + 1; i < length; i++ ) {
spa.select.options[i] = new Option(spa.start++);
}
obj.parent.appendChild(spa.select);
spa.select.addEventListener("change", function () {
var amount = 0;
mas.map(function (value) {
amount += value.select.selectedIndex;
});
if (amount >= obj.sum) {
this.selectedIndex = 0;
alert("too much");
}
});
});
}
//usage
createDependableSelects({
selectPointsArray: [
{start: 1, end: 9},
{start: 0, end: 8},
{start: 0, end: 8},
{start: 0, end: 2}
],
parent: document.querySelector("div"),
sum: 9
});
</script>
|
|
|
|
