How to change select tag when I choose another select tag?

Question

I honestly find it hard how am I going to construct my question but for details sake I will explain it clearly.

I have a select tag about hotel roomType such as ordinary, family, deluxe, executive, presidenial and the like, and in another select tag I have room numbers such as room 401, 402..., 501.... What I want to come up is everytime I choose ordinary room the room numbers will change into 401-409 and if i choose presidential the room number will change into 500-509 and so on... is it possible? I am using php.

    echo "Room Type              &nbsp";
    echo "<select>
        <option value='ordinary'>Ordinary</option>;
        <option value='family'>Family</option>
        <option value='superior'>Superior</option>
        <option value='deluxe'>Deluxe</option>
        <option value='corner'>Corner Suite King</option>
        <option value='executive'>Executive</option>
        <option value='exSuite'>Executive Suite</option>
        <option value='exGrand'>Grand Executive</option>
        <option value='presidential'>Presidential</option>
        </select>";
    echo "<br/>";
    echo "<table border='1'>";  
/*------------------------------------------------------------------------*/        

    echo "Available Rooms &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp";
    echo
     "<select>";
    $x= 401;
    while($x<=500)
    {
        echo "<option>$x</option>";
        $x++;
}   

    echo "</select>";
    echo "<hr/>";
    echo "<table border='1'>";  

/*------------------------------------------------------------------------*/        


    echo "<input type='Submit'>";

this is my code this is just my second php project before hello world output php :D

Answer 1

Only with PHP it is not possible, however with javascript / jquery it is possible :-)

You handle the change event and fill your avaible select

$(function() { //run on document.ready
  $("#selectRoom").change(function() { //this occurs when select 1 changes
    //Fill by AJAX your second selectbox
  });
});

Answer 2

You will need to use JavaScript. Set an onchange event for the "rootType" select box to update the innerHTML of the room numbers select box.

Have a look at this question