Select boxes by country and region

How can I customise a form to only show the relevant countries when selecting a region in my form below?

This is my code

<form id="sobi2Search" name="sobi2Search" action="index.php"
    method="get"><input type="hidden" value="com_sobi2"
    name="option"> <input type="hidden" value="search"
    name="sobi2Task"> <input type="hidden" value="1"
    name="Itemid">

<table width="100%" class="">
    <tbody>
        <tr>
            <td>
            <h6>Search over <b><u> 82 </u></b> companies</h6>
            </td>
        </tr>
        <tr>
            <td><input type="text"
                onfocus="if(this.value=='') this.value='';"
                onblur="if(this.value=='') this.value='';" value=""
                size="20" class="inputbox" alt="search" maxlength="20"
                name="sobi2Search"></td>
        </tr>
        <tr>
            <td><select id="sobiCid" class="inputbox catChooseBox"
                name="sobiCid" size="1">
                <option value="0">Search all services</option>
                <option value="3">Accommodation</option>
                <option value="6">Airlines</option>
                <option value="5">Tour Operators</option>
                <option value="4">Overland / Self Drive</option>
                <option value="7">Tourist Boards</option>
            </select></td>
        </tr>
        <tr>
            <td><select name="field_region" size="1"
                class="inputbox" id="field_region">
                <option value="all">Search all regions</option>
                <option value="North Africa">North Africa</option>
                <option value="East Africa">East Africa</option>
                <option value="Southern Africa">Southern Africa</option>
                <option value="Central Africa">Central Africa</option>
                <option value="West Africa">West Africa</option>
                <option value="Indian Ocean Islands">Indian
                Ocean Islands</option>
            </select></td>
        </tr>
        <tr>
            <td><select name="field_countries" size="1"
                class="inputbox" id="field_countries">
                <option value="all">Search all countries</option>
                <option value="Algeria">Algeria</option>
                <option value="Angola">Angola</option>
                <option value="Benin">Benin</option>
                <option value="Botswana">Botswana</option>
                <option value="Cameroon">Cameroon</option>
                <option value="DR Congo">DR Congo</option>
                <option value="Egypt">Egypt</option>
                <option value="Ethiopia">Ethiopia</option>
                <option value="Gabon">Gabon</option>
                <option value="Gambia">Gambia</option>
                <option value="Ghana">Ghana</option>
                <option value="Kenya">Ken开发者_Go百科ya</option>
                <option value="Lesotho">Lesotho</option>
                <option value="Libya">Libya</option>
                <option value="Madagascar">Madagascar</option>
                <option value="Malawi">Malawi</option>
                <option value="Mali">Mali</option>
                <option value="Mauritius">Mauritius</option>
                <option value="Morocco">Morocco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Namibia">Namibia</option>
                <option value="Niger">Niger</option>
                <option value="Rwanda">Rwanda</option>
                <option value="Senegal">Senegal</option>
                <option value="Seychelles">Seychelles</option>
                <option value="South Africa">South Africa</option>
                <option value="Swaziland">Swaziland</option>
                <option value="Tanzania">Tanzania</option>
                <option value="Tunisia">Tunisia</option>
                <option value="Uganda">Uganda</option>
                <option value="Zambia">Zambia</option>
                <option value="Zimbabwe">Zimbabwe</option>
            </select></td>
        </tr>

        <tr>
            <td><br>
            <input type="submit" value="Search" class="green-button"
                name="search"></td>
        </tr>
    </tbody>
</table>
</form>

HTML by itself will not do the trick. You will have to use JavaScript for something like this:

I would use aJax, and load countries once region is selected. The database table needs to look something like this.

|-----------------------|
| region   | country |
|-----------------------|
| florida   | usa       |
| georgia | usa       |
| texas     | usa       |
| ghana   | africa south       |
| africa    | africa       |
|-----------------------|

<option name="country" onchange="loadRegions();">
 <option value="usa>usa</option>
 <option value="africa">africa</option>
</option>

<option name="regions"></option>

<script type="text/javascript">
function loadRegions(){
  // create ajax request to php script that returns json (array of objects/strings)
  // in case of Joomla you want to call the controller 'index.php?option=com_mycomponents&controller=regionFilter&country=[selected country]
  // pass country as parameter
  // clear the regions 
  // set the regions to the json data

}
</script>

You are better of using some Ajax library for this: JQuery or Mootools. Here is a demo http://demos.mootools.net/Request.JSON of json request.

I would advise you to avoid splitting these information and rather use <optgroup> element to group countries by regions.

If you really want to do as you described and, IMHO, break usability rules, you'll need to make use of Javascript, and dynamicly load your countries when selecting a region with the use of the onChange event