сделать 2 зависимых <select> от общего доступного числа значений
Приветствую,
к примеру имеем автобус в котором всего 10 мест, и надо выбрать сколько поедет взрослых и сколько детей. нужно чтобы кол-во элементов в каждом <select> менялось в зависимости от выбранного в другом, чтобы суммарно было 10 человек и не было возможности выбрать больше чем можно. к примеру выбрав 6 взрослых я мог выбрать только 4х детей или выбрав 2 детей я мог выбрать только 8 взрослых. <select class="form-control" id="count_adult" name="count_adult"> <option value="1" price="160">1 adult - 160 Points</option> <option value="2" price="320">2 adults - 320 Points</option> <option value="3" price="480">3 adults - 480 Points</option> <option value="4" price="640">4 adults - 640 Points</option> <option value="5" price="800">5 adults - 800 Points</option> <option value="6" price="960">6 adults - 960 Points</option> <option value="7" price="1120">7 adults - 1120 Points</option> <option value="8" price="1280">8 adults - 1280 Points</option> <option value="9" price="1440">9 adults - 1440 Points</option> <option value="10" price="1600">10 adults - 1600 Points</option> </select> <select class="form-control" id="count_child" name="count_child"> <option value="0" price="0">0 child - 0 Points</option> <option value="1" price="120">1 child - 120 Points</option> <option value="2" price="240">2 children - 240 Points</option> <option value="3" price="360">3 children - 360 Points</option> <option value="4" price="480">4 children - 480 Points</option> <option value="5" price="600">5 children - 600 Points</option> <option value="6" price="720">6 children - 720 Points</option> <option value="7" price="840">7 children - 840 Points</option> <option value="8" price="960">8 children - 960 Points</option> <option value="9" price="1080">9 children - 1080 Points</option> <option value="10" price="1200">10 children - 1200 Points</option> </select> помогите пожалуйста написать на jQuery :) http://jsfiddle.net/xfw4jb4s/1/ |
vano44,
потом окажется что и 10 детей нельзя и что без взрослых нельзя, поэтому сначала дают выбирать только взрослых, а потом детей из расчёта оставшихся мест |
Цитата:
пс. хотя да можно переписать как вы говорите если это более простое решение.. |
Зависимые селекта лимит общей суммы селекторов
:write: похоже на зависимые селекты тоже можно ставить счётчик, как на открывашка.
jquery тут нафиг ненужна, но раз хочется ... :cray:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script>
$(function() {
var d = {
count_adult: $("#count_child option"),
count_child: $("#count_adult option")
};
el = {
count_adult: $("#count_child")[0],
count_child: $("#count_adult")[0]
};
$("#count_adult, #count_child").change(function() {
var a = this.id,
e = 10 - this.value,
b = el[a],
v = b.value;
b.options.length = 0;
$.each(d[a], function(a, c) {
c.value <= e && b.options.add(c)
});
b.value = v;
}).change()
});</script>
</head>
<body>
<select class="form-control" id="count_adult" name="count_adult">
<option value="1" price="160">1 adult - 160 Points</option>
<option value="2" price="320">2 adults - 320 Points</option>
<option value="3" price="480">3 adults - 480 Points</option>
<option value="4" price="640">4 adults - 640 Points</option>
<option value="5" price="800">5 adults - 800 Points</option>
<option value="6" price="960">6 adults - 960 Points</option>
<option value="7" price="1120">7 adults - 1120 Points</option>
<option value="8" price="1280">8 adults - 1280 Points</option>
<option value="9" price="1440">9 adults - 1440 Points</option>
<option value="10" price="1600">10 adults - 1600 Points</option>
</select>
<select class="form-control" id="count_child" name="count_child">
<option value="0" price="0">0 child - 0 Points</option>
<option value="1" price="120">1 child - 120 Points</option>
<option value="2" price="240">2 children - 240 Points</option>
<option value="3" price="360">3 children - 360 Points</option>
<option value="4" price="480">4 children - 480 Points</option>
<option value="5" price="600">5 children - 600 Points</option>
<option value="6" price="720">6 children - 720 Points</option>
<option value="7" price="840">7 children - 840 Points</option>
<option value="8" price="960">8 children - 960 Points</option>
<option value="9" price="1080">9 children - 1080 Points</option>
<option value="10" price="1200">10 children - 1200 Points</option>
</select>
</body>
</html>
|
Ого, я только почти переписал по вашему совету, чтоб сперва выбирать взрослых а потом давать детей, а вы красивое решение поставленной задачи предоставили.. Супер. Спасибо :) :dance:
|
только если поиграться вылезает косяк что значения во втором поле выбираются сами больше чем было.
если поставить не хочу детей, и выбрать больше взрослых дети возвращаются) http://youtu.be/_waNlBKL6Zg Цитата:
|
vano44,
непонял про косяк , несмотря на ваше кино . может опишите что вы делаите и на каком браузере |
гугл хром,
http://youtu.be/oI37EKvkPY8 вот все действия с открытия. просто к примеру выбрав 2 взрослых - уже сам выбирается 1 ребёнок выбираешь 3 взрослых 2 ребёнка сами появляются.. да и на видео видно что она и в другую сторону глючит. выбираю 6 детей - сразу 2 взрослых :blink: в опере значения вообще выбираются такие что всегда 10 человек получается.. а хотелось бы чтобы везде работало, для удобства людей всё таки делаю) |
vano44,
это Google Chrome фигнёй страдает -- смотрите исправленный вариант пост 4 |
рони, отлично, везде работает. супер!)
пс, я написал уже свой вариант по вашему совету, но буду использовать ваше решение, как более красивое) |
| Часовой пояс GMT +3, время: 03:34. |