Filtersystem für Restaurant Buchung

Question

Mein Skript funktioniert zu 80%. Aber wenn es um den unteren Teil geht, wo Sie ein paar 6-8 Leute sind, hört mein Sortier-Skript auf zu arbeiten. Ich bin ein Anfänger und weiß nicht so viel. Wäre hilfreich, wenn das Problem gelöst wäre.

Q: Ich möchte, dass es so funktioniert, wenn Sie 8 Personen sind, können Sie nur einen Tisch für 8 und höher auswählen.

LIVE-Version: https://elevarbetensys.se/SY15/MS15/GYARB/index.html#reservation

Code:

<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

In Ihrem Code Sie Tabellen zu entfernen, die die weniger Sitze als die ausgewählte Buchung. Während das funktioniert, wenn der Benutzer versehentlich acht Personen auswählte? Wenn der Benutzer dann die Auswahl korrigierte, wäre nur noch Tabelle 2 verfügbar. Ein besserer Weg, es zu tun wäre, um die Tabellen zu verstecken, die nicht genug Sitze haben -

$(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

Ihr Code kann vereinfacht werden, indem die Logik nicht wiederholt wird. Der Code unten hat ein paar Dinge

1. erhält die ausgewählte Anzahl von Menschen
2. zeigt alle Optionen
3. Optionen finden, die unter Verwendung .filter zu den Optionen sind ungültig
4. die ungültigen Optionen verbergen.

$(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

Sie sollen nicht Gegenstand entfernen, weil, wenn sie Zahl der Menschen verändern, die alten Daten wurden entfernt und Sie können diese nicht anzeigen, außer sie erneut hinzuzufügen. Update: Sie wollen auf dann Textwert basieren? hier ist ein Weg:

$('#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); 
}); 

Vorschlag 2: - sollten Sie ein Attribut erstellen, die die Anzahl der Tabelle für die Option halten, zB:

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

dann Abfrage von Menschen

$('#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); 
});