Question

如何在下面的表单中选择区域时自定义表单以仅显示相关国家/地区？

这是我的代码

<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本身不会起作用。你将不得不使用这样的东西：

我会使用aJax，并在选择区域后加载国家/地区。数据库表需要看起来像这样。

| ----------------------- |
  |地区|国家|
  | ----------------------- |
  |佛罗里达州|美国|
  |格鲁吉亚|美国|
  |得克萨斯州美国|
  |加纳|非洲南部|
  |非洲|非洲|
  | ----------------------- |

<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>

你最好使用一些Ajax库： JQuery或Mootools。这是json请求的演示http://demos.mootools.net/Request.JSON。

Answer 2

我建议您避免拆分这些信息，而是使用<optgroup>元素按地区对国家/地区进行分组。

如果你真的想按照你所描述的那样去做，恕我直言，打破可用性规则，你需要使用Javascript，并在使用onChange事件选择区域时动态加载你的国家/地区

按国家和地区选择框

2 个答案: