Обновление выпадающего меню на основе предыдущего выбора

Question

Я создаю приложение «Ruby on Rails» для кинотеатра и в настоящее время работаю над заказом.

Пользователь может выбрать количество взрослых мест, детских кресел, мест для студентов и старших мест. Экран имеет много мест, которые хранятся в столике сидений, но пользователь не заказывает определенное место, а количество мест. Выпадающие меню позволяют пользователю выбирать максимум 10 мест для каждого количества (взрослый, ребенок, студент, старший), но если на экране есть 50 мест и 45 из них забронированы, то выпадающие меню ограничены максимум 5. Но моя проблема заключается в том, что этот максимум на каждом выпадающем списке - так что пользователь может выбрать 5 взрослых мест, детские кресла, места для студентов и старшие места.

Я знаю, что могу добавить подтверждение, чтобы на экране было 50 мест, а 45 уже забронированы, и пользователь выбирает 5 взрослых, 5 детей, 5 учеников и 5 старших мест, затем он добавит количества и существующие (5 + 5 + 5 + 5 + всего существующих заказов = 65), чтобы гарантировать, что это не превышает емкость экрана. Но я хочу сделать так, чтобы выпадающее меню обновлялось на основе предыдущего выбора. Так что, если в общей сложности осталось 5 мест для бронирования, а пользователь выбирает 3 взрослых места, выпадающие списки для детей, учеников и старших должно быть ограничено максимум 2.

Может кто-то, пожалуйста, помогите мне сделать это. Я рассмотрел так много ссылок для динамических выпадающих списков, но ни один из них не затрагивает ничего подобного, поскольку они сосредоточены на таких вещах, как страны и государства.

просмотров/заказы/_form.html.erb:

<td> 
    <%= f.select :adult_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br> 
</td> 
<td> 
    <%= f.select :child_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br> 
</td> 
<td> 
    <%= f.select :senior_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br> 
</td> 
<td> 
    <%= f.select :student_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br> 
</td> 

Screen.rb:

class Screen < ActiveRecord::Base 

has_many :seats 
has_many :showings 
has_many :bookings, through: :showings 

def remaining_seats 
    available_seats = seats.count - bookings.sum(:adult_seats) 
    available_seats = available_seats - bookings.sum(:child_seats) 
    available_seats = available_seats - bookings.sum(:disabled_seats) 
    available_seats = available_seats - bookings.sum(:student_seats) 
    available_seats = available_seats - bookings.sum(:senior_seats) 
    available_seats = available_seats - bookings.sum(:immortal_seats) 
end 
end 

schema.rb:

create_table "bookings", force: :cascade do |t| 
    t.integer "user_id" 
    t.integer "showing_id" 
    t.datetime "created_at",  null: false 
    t.datetime "updated_at",  null: false 
    t.integer "adult_seats" 
    t.integer "child_seats" 
    t.integer "senior_seats" 
    t.integer "student_seats" 
end 

create_table "screens", force: :cascade do |t| 
    t.string "name" 
    t.datetime "created_at", null: false 
    t.datetime "updated_at", null: false 
end 

create_table "seats", force: :cascade do |t| 
    t.string "row_letter" 
    t.integer "row_number" 
    t.integer "screen_id" 
    t.datetime "created_at", null: false 
    t.datetime "updated_at", null: false 
end 

create_table "showings", force: :cascade do |t| 
    t.date  "show_date" 
    t.time  "show_time" 
    t.integer "film_id" 
    t.datetime "created_at", null: false 
    t.datetime "updated_at", null: false 
    t.integer "screen_id" 
end 

Answer 1

Вот пример: https://jsfiddle.net/zdzfsq7m/4/

Я бы рекомендовал d возвращает общее число, которое доступно в поле ввода, вместо числа, которое принято.

<input type="hidden" value="8" name="seats_available" id="seats_available"> 
<select id="adult" name="adult"> 
    <option val="0">0</option> 
    <option val="1">1</option> 
    <option val="2">2</option> 
    <option val="3">3</option> 
    <option val="4">4</option> 
    <option val="5">5</option> 
</select> 
<br><br><br> 
<select id="child" name="child"> 
    <option val="0">0</option> 
    <option val="1">1</option> 
    <option val="2">2</option> 
    <option val="3">3</option> 
    <option val="4">4</option> 
    <option val="5">5</option> 
</select> 

Javascript:

$(document).ready(function() { 
    var seats_available = parseInt($('#seats_available').val()); 
    var max_allowed = 5; 

    $('select').on('change', function() { 
     var currently_selected = 0; 
     $('select').each(function() { 
      currently_selected += parseInt($(this).val());    
     }) 
     $('select').each(function() { 
      var nowAvailable = seats_available - currently_selected; 
      var currentlySelectedValue = parseInt($(this).val());   
      $(this).find('option').each(function() { 
       $option = $(this)   
       num = parseInt($option.val()); 
       if (num <= currentlySelectedValue) 
        $option.prop('disabled', false); 
       else if (nowAvailable >= 5) 
        $option.prop('disabled', false); 
       else 
        $option.prop('disabled', num - currentlySelectedValue >= nowAvailable);    
      }) 
     }); 
    })  

})