How can we arrange the three select box into one sequence through Jquery

Question

I would like to know how can we arrange the three select box, with having some options, it will be configured according to the previous select box value.

Please look at the code which we applied for our program.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {

var rtype = $("#rtype").val();
var rarray = rtype.split(' ');

var max_adults = rarray[1];
var min_adults = rarray[0];

//var max_adults = 3;
//var min_adults = 2;

$('#rooms').change(function(){
var room_num = $(this).val();
var options = '';
for (var i = min_adults * room_num; i <= max_adults * room_num; i++) { options += '<option value="'+i+'">'+i+'</option>' } $('#person').html(options); }); $('#rooms').change(); });
</script>

</head>
<body>Room Type <select name="rtype" id="rtype"><option Selected value="">Select</option><option value="2 3">Room 2-3</option> <option value="3 4">Room 3-4</option></select> Category: <select name="rooms" id="rooms"> <option Selected value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>Persons<select name="person" id="person"> </select></body>

Above this code is working fine if we remove the code for "rtype" ID, and entered the hard coded value to the query like this.

var max_adults = 3;
var min_adults = 2;

but we likt to update this value when we change the "rtype" id, the value for the an option is ( 2 3), we just have to split these value in to two part, the higher one will put into " var max_adults", and lower one will go to "var min_adult".

Please give me the proper solution, how can we arrange the codes accordingly.

Jasper · Accepted Answer · 2012-01-30T09:41:17.710

2

You need to put the rtype code inside the change event handler tof the #rooms element:

$(function () {

    $('#rooms').change(function(){

        //get the `#rtype` value
        var rtype = $("#rtype").val();

        //check to make sure the `#rtype` value isn't an empty string
        if (rtype != '') {

            var room_num   = $(this).val(),
                rarray     = rtype.split(' '),
                options    = '',
                max_adults = rarray[1],
                min_adults = rarray[0];

            for (var i = min_adults * room_num; i <= max_adults * room_num; i++) {
                options += '<option value="'+i+'">'+i+'</option>';
            }

            $('#person').html(options);

        } else {

            //since no `#rtype` value was found alert the user
            alert('Please Select a Room Type');

        }

    //trigger the change event by chaining rather than re-selecting the same element
    }).change();

});

Update

To make one element appear when the other changes, add this to the document.ready event handler:

$('#rtype').change(function () {

    //if a value has not been selected then hide the `#rooms` element, otherwise show it
    if (this.value == '') {
        $('#rooms').hide();
    } else {
        $('#rooms').show();
    }
});

You then need to add the following CSS for the #rooms element:

#rooms {
    display : none;
}

edited Jan 30 '12 at 09:41

answered Jan 30 '12 at 09:10

Jasper

75,717
14
151
146

Thanks jasper, Actually i would like that , we select first Rtype, then Number Rooms, and then Persons. – PPS Jan 30 '12 at 09:13
I added an `if/then` statement that checks for a valid `#rtype` selection. – Jasper Jan 30 '12 at 09:16
Could please help me to resolve this situation. The code logic is working superb, but we just want to implement the logic in different scenario, When page load at first, only one select box appear (Room Type), if we select Room Type then,No. Room appear, after the select the option in Rooms, at last appear Persons. this is our main motive to complete the code. – PPS Jan 30 '12 at 09:37
There ya go, I've got to leave for now but I think that'll get ya going. Check the update to my answer. – Jasper Jan 30 '12 at 09:41
Thanks Jasper, It Could be possible to reset the other two select boxex(Rooms, Persons) when we change the value for Room Type. – PPS Jan 30 '12 at 09:57

How can we arrange the three select box into one sequence through Jquery

1 Answers1

Update