Question

我正在创建一个电影Ruby on Rails应用程序，目前正在进行预订。

用户可以选择成人座位，儿童座位，学生座位和高级座位的数量。屏幕有许多座位存储在座位表中，但用户不是预订特定座位而是预订座位数量。下拉菜单允许用户为每个数量（成人，儿童，学生，老年人）选择最多10个座位，但如果屏幕有50个座位且其中45个已预订，则下拉菜单限制为最多但我的问题是这个最大值是每次下拉 - 所以用户可以选择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/

我建议您返回输入字段中可用的总数，而不是返回的数字。

<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);               
            })
        });
    })    

})

根据之前的选择更新下拉菜单

1 个答案: