Sending Multiple Data Option Arrays Back To Jquery

[Xtremer360]

You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road.

 

The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box.

 

Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated.

 

form page

 

$('#countryid').change(function() {
      var countryid = $("select#countryid").val();
      var dataString = 'countryid='+ countryid;
      $.ajax({
        type: "POST",
        url: "processes/booking.php",
        data: dataString,
        success: function() {
            
        }
        });  
    });
<div class="field required">
    			<label for="countryid">Country</label>
                <select class="dropdown" name="countryid" id="countryid" title="Country">
                   <option value="0">- Select -</option> 
                    <?php
                    $query = 'SELECT id, countryname FROM countries';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) 
                    {
                        print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
                    }
                    ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="arena">Arenas</label>
                <select class="dropdown" name="arenas" id="arenas" title="Arenas">
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>

 

 

php process page

 

$countryid = (int)$_GET['countryid'];
$query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'";
$result = mysqli_query ($dbc, $query);
while ($row = mysqli_fetch_array($dbc, $result))
{    
    echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n';
} 

[Xtremer360]

I had some assistance with someone who had a similar thing like this and he allowed me to look at his code and create something off of his that I can use for mine