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

Question

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

474 views Asked by PPS At 30 January 2012 at 08:55

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.

Original Q&A

There are 1 answers

**Jasper** · Accepted Answer · 2012-01-30 09:10:44

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

TechQA.

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

There are 1 answers

Update

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-SELECTBOX

Popular Questions

Popular Tags

Trending Questions