Question

I am working on this website here http://offline.raileisure.com/

on the right there are some options to book a reservation..

Where it says No. of Adults and No. of Children, I need this to be limited to x per property..

i.e. if the Station Masters House is selected its maximum occupancy is 8 people..

So if 5 Adults are selected I need the Children select menu to only show the difference between 5-8 if that makes sense..

Otherwise someone could book 5 children and 5 adults… and that would be more than the maximum 8…

Same as if the carriage is chosen the maximum occupancy is 4

Thanks

Lee

Answer 1

have a look at the jquery change event

http://api.jquery.com/change/

you can use this event to edit the other input and only make the options available that are still left.

here is the code that does exactly what you want:

var max = 8;

for (var i = 0; i <= max; i++) {
    $("#children, #adults").append($("<option></option>").attr("value", i).text(i));
}

$("#adults").change(function() {
    var sel = $("#children").val();
    $("#children").html("");
    for (var i = 0; i <= max - parseInt($("#adults").val()); i++) {
        $("#children").append($("<option></option>").attr("value", i).text(i));
    }
    $("#children").val(sel);
});

$("#children").change(function() {    
    var sel= $("#adults").val();
    $("#adults").html("");
    for (var i = 0; i <= max - parseInt($("#children").val()); i++) {
        $("#adults").append($("<option></option>").attr("value", i).text(i));
    }    
    $("#adults").val(sel);
});

working example: http://jsfiddle.net/geertvdc/ADC3a/