Question

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">Kenya</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>

Answer 1

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.