餐廳預訂過濾系統

Question

我的腳本工作到80％。然而，當涉及到下半部分時，你是一對6-8人，我的排序腳本停止工作。我是一個初學者，不太瞭解。如果問題得到解決，將會有所幫助。問：我希望它能夠工作，所以當你是8人時，你只能選擇8人以上的桌子。

LIVE版本：https://elevarbetensys.se/SY15/MS15/GYARB/index.html#reservation

代碼：

<select id="persons" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
        <option value="1">1 Pers. 
        <option value="2">2 Pers. 
        <option value="3">3 Pers. 
        <option value="4">4 Pers. 
        <option value="5">5 Pers. 
        <option value="6">6 Pers. 
        <option value="7">7 Pers. 
        <option value="8">8 Pers. 
       </select> 
       <select id="table" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
        <option value="4">Table: 1 
        <option value="8">Table: 2 
        <option value="2">Table: 3 
        <option value="2">Table: 4 
        <option value="2">Table: 5 
        <option value="4">Table: 6 
        <option value="2">Table: 7 
        <option value="2">Table: 8 
        <option value="2">Table: 9 
        <option value="4">Table: 10 
        <option value="6">Table: 11 
        <option value="4">Table: 12 
        <option value="4">Table: 13 
        <option value="4">Table: 14 
        <option value="4">Table: 15 
        <option value="4">Table: 16 
        <option value="2">Table: 17 
        <option value="2">Table: 18 
        <option value="4">Table: 19 
        <option value="4">Table: 20 
        <option value="4">Table: 21 
        <option value="4">Table: 22 
        <option value="6">Table: 23 
        <option value="6">Table: 24 
       </select> 

的Javascript：

$(document).ready(function() { 
$("#persons").on("change", function() { 

    if ($("#persons").val() > 2) { 
     //alert($('#table option').size()); 
     for(i = 0; i < $('#table option').size(); i++) { 
      if ($('#table option[value="' + i + '"]').val() < 3){ 
       $('#table option[value="' + i + '"]').remove(); 
      } 
     } 
    } 

    if ($("#persons").val() > 5) { 
     //alert($('#table option').size()); 
     for(i = 0; i < $('#table option').size(); i++) { 
      if ($('#table option[value="' + i + '"]').val() < 5){ 
       $('#table option[value="' + i + '"]').remove(); 
      } 
     } 
    } 

    if ($("#persons").val() > 6) { 
     //alert($('#table option').size()); 
     for(i = 0; i < $('#table option').size(); i++) { 
      if ($('#table option[value="' + i + '"]').val() < 6){ 
       $('#table option[value="' + i + '"]').remove(); 
      } 
     } 
    } 

    if ($("#persons").val() >= 7) { 
     //alert($('#table option').size()); 
     for(i = 0; i < $('#table option').size(); i++) { 
      if ($('#table option[value="' + i + '"]').val() < 8){ 
       $('#table option[value="' + i + '"]').remove(); 
      } 
     } 
    } 






}); 

}）;

Answer 1

在你的代碼被刪除，對具有比選中的預約座位少的表。如果用戶偶然選擇了八個人，這將會起作用嗎？如果用戶然後更正了選擇，那麼仍然只有表2可用。這樣做的更好的方式是隱藏表沒有足夠的座位 -

$(document).ready(function() { 
 
    $("#persons").on("change", function() { 
 
    var $this = $(this); 
 
    //Reset the table select 
 
    $("#table").val(0); 
 
    // Hide all tables 
 
    $("#table").find("option").hide(); 
 
    // Select all tables then filter the list to those that have enough seats and show them 
 
    $("#table").find("option").filter(function(index, element) { 
 
     return parseInt($(element).attr("value")) >= parseInt($this.val()); 
 
    }).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="persons" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
 
        <option value="1">1 Pers.</option> 
 
        <option value="2">2 Pers.</option> 
 
        <option value="3">3 Pers.</option> 
 
        <option value="4">4 Pers.</option> 
 
        <option value="5">5 Pers.</option> 
 
        <option value="6">6 Pers.</option> 
 
        <option value="7">7 Pers.</option> 
 
        <option value="8">8 Pers.</option> 
 
       </select> 
 
<select id="table" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
 
        <option value="0">No Table Selected</option> 
 
        <option value="4">Table: 1</option> 
 
        <option value="8">Table: 2</option> 
 
        <option value="2">Table: 3</option> 
 
        <option value="2">Table: 4</option> 
 
        <option value="2">Table: 5</option> 
 
        <option value="4">Table: 6</option> 
 
        <option value="2">Table: 7</option> 
 
        <option value="2">Table: 8</option> 
 
        <option value="2">Table: 9</option> 
 
        <option value="4">Table: 10</option> 
 
        <option value="6">Table: 11</option> 
 
        <option value="4">Table: 12</option> 
 
        <option value="4">Table: 13</option> 
 
        <option value="4">Table: 14</option> 
 
        <option value="4">Table: 15</option> 
 
        <option value="4">Table: 16</option> 
 
        <option value="2">Table: 17</option> 
 
        <option value="2">Table: 18</option> 
 
        <option value="4">Table: 19</option> 
 
        <option value="4">Table: 20</option> 
 
        <option value="4">Table: 21</option> 
 
        <option value="4">Table: 22</option> 
 
        <option value="6">Table: 23</option> 
 
        <option value="6">Table: 24</option> 
 
       </select>

Answer 2

您的代碼可以通過不重複邏輯來簡化。下面的代碼做了幾件事情

1. 受到人們選擇的號碼
2. 顯示所有
3. 發現它們是通過在選項
4. 隱藏無效選項使用.filter無效選項的選項。

$(function(){ 
 
    $('#persons').on('change',function(){ 
 
     var numPeople = parseInt($(this).val(),10); 
 
     var $options = $('#table option'); 
 
     $options.show(); 
 
     var $invalidTables = $options.filter(function(){ 
 
      return parseInt($(this).attr("value"),10)<numPeople; 
 
     }); 
 
     $invalidTables.hide(); 
 
     $('#table').val(""); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="persons" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
 
    <option value="1">1 Pers. 
 
    <option value="2">2 Pers. 
 
    <option value="3">3 Pers. 
 
    <option value="4">4 Pers. 
 
    <option value="5">5 Pers. 
 
    <option value="6">6 Pers. 
 
    <option value="7">7 Pers. 
 
    <option value="8">8 Pers. 
 
</select> 
 
<select id="table" class="form-group input-group clockpicker form-control selectpicker" style="width:300px;"> 
 
    <option value=""> 
 
    <option value="4">Table: 1 
 
    <option value="8">Table: 2 
 
    <option value="2">Table: 3 
 
    <option value="2">Table: 4 
 
    <option value="2">Table: 5 
 
    <option value="4">Table: 6 
 
    <option value="2">Table: 7 
 
    <option value="2">Table: 8 
 
    <option value="2">Table: 9 
 
    <option value="4">Table: 10 
 
    <option value="6">Table: 11 
 
    <option value="4">Table: 12 
 
    <option value="4">Table: 13 
 
    <option value="4">Table: 14 
 
    <option value="4">Table: 15 
 
    <option value="4">Table: 16 
 
    <option value="2">Table: 17 
 
    <option value="2">Table: 18 
 
    <option value="4">Table: 19 
 
    <option value="4">Table: 20 
 
    <option value="4">Table: 21 
 
    <option value="4">Table: 22 
 
    <option value="6">Table: 23 
 
    <option value="6">Table: 24 
 
</select>

Answer 3

你不應該刪除的項目，因爲當他們改變人們數，老數據被刪除，除了再次添加外，您無法顯示這些數據。 更新：你想基於那麼文本值？這裏有一個辦法：

$('#person').on('change', function(){ 
    var numOfPeople = $(this).val(); 
    var $table = $('#table'); 

    $.each($table.find('option'),function(){ 
     var $option = $(this); 
     var numb = $option.text().match(/[\d]+/g); 
     numb = numb.length ? numb[0] : 0; 
     $option.toggle(numb >= numOfPeople); 
     }); 

     //set default value for table 
     $table.val(numOfPeople); 
}); 

建議2： - 你應該創建一個持有期權臺數的屬性，如：人們

<select> 
     <option people="5" value="2">Table: 5</option> 
     <option people="6" value="2">Table: 6</option> 
     <option people="7" value="2">Table: 7</option> 
     <option people="8" value="4">Table: 8</option> 
     <option people="9" value="5">Table: 9</option> 
     <option people="10" value="2">Table: 10 </option> 

然後查詢

$('#person').on('change', function(){ 
    var numOfPeople = $(this).val(); 
    var $table = $('#table'); 

    $.each($table.find('option'),function(){ 
     var $option = $(this); 
     var numb = $option.attr('people'); 
     $option.toggle(numb >= numOfPeople); 
     }); 

     //set default value for table 
     $table.val(numOfPeople); 
});