餐厅预订过滤系统

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