Форум

vano44 · #1 (**permalink**) 07.06.2015, 12:10

Приветствую,

к примеру имеем автобус в котором всего 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/

рони · #2 (**permalink**) 07.06.2015, 12:34

vano44,
потом окажется что и 10 детей нельзя и что без взрослых нельзя, поэтому сначала дают выбирать только взрослых, а потом детей из расчёта оставшихся мест

vano44 · #3 (**permalink**) 07.06.2015, 12:59

Сообщение от рони

vano44,
потом окажется что и 10 детей нельзя и что без взрослых нельзя, поэтому сначала дают выбирать только взрослых, а потом детей из расчёта оставшихся мест

Поэтому 1 взрослый это минимальное значение

пс. хотя да можно переписать как вы говорите если это более простое решение..

рони · #4 (**permalink**) 07.06.2015, 13:15

похоже на зависимые селекты тоже можно ставить счётчик, как на открывашка.
jquery тут нафиг ненужна, но раз хочется ...

<!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>

vano44 · #5 (**permalink**) 07.06.2015, 13:33

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

vano44 · #6 (**permalink**) 07.06.2015, 13:38

только если поиграться вылезает косяк что значения во втором поле выбираются сами больше чем было.

если поставить не хочу детей, и выбрать больше взрослых дети возвращаются)
http://youtu.be/_waNlBKL6Zg

Сообщение от рони

jquery тут нафиг ненужна, но раз хочется ...

на ней получается короче и красивее, но она не обязательна )

рони · #7 (**permalink**) 07.06.2015, 13:54

vano44,
непонял про косяк , несмотря на ваше кино . может опишите что вы делаите и на каком браузере

vano44 · #8 (**permalink**) 07.06.2015, 14:01

гугл хром,
http://youtu.be/oI37EKvkPY8

вот все действия с открытия.

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

в опере значения вообще выбираются такие что всегда 10 человек получается..
а хотелось бы чтобы везде работало, для удобства людей всё таки делаю)

рони · #9 (**permalink**) 07.06.2015, 14:12

vano44,
это Google Chrome фигнёй страдает -- смотрите исправленный вариант пост 4

vano44 · #10 (**permalink**) 07.06.2015, 14:42

рони, отлично, везде работает. супер!)

пс, я написал уже свой вариант по вашему совету, но буду использовать ваше решение, как более красивое)

Форум

Справочник

Discord чат

Курсы javascript