Home/ Questions/Q 7247861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T22:03:44+00:00

I would like to know how can we arrange the three select box, with

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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