填充下拉框而不重新加载页面

时间:2013-01-10 05:42:28

标签: php javascript jquery html auto-populate

我本周开始学习PHP / HTML,因为我的公司需要一个小工具,它会根据邮政编码返回郊区列表。我的知识非常有限,但我能够让它按照我想要的方式工作。除了onchange / onblur,它会重新加载整个页面。我似乎无法解决或找到只重新加载下拉框的方法。从搜索互联网看来,Jquery或Javascript似乎是唯一的方法。但我找不到足够接近我的需求的示例/教程。

这是代码。基本上,您填写文本输入,关闭点击将邮政编码放入API,然后以JSON格式返回所有相应的郊区。然后通过JSON数据填充下拉框。

非常感谢您的帮助!

<?php
//Turn data from user entry screen into variables
$pcode = $_GET["pcode"];
//Load API key and API URL
include 'api.php';

//Initializing curl
$ch = curl_init($url);
//Setting curl options
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
//Getting results
$api_result = curl_exec($ch);
//Close Curl
curl_close($ch); 

//Place API call results into $data variable
$suburb_data = json_decode($api_result, TRUE);

//Display JSON Data - Comment out in production
//var_export($suburb_data);

//Turn suburb list array in a variable
$suburb_list = ($suburb_data['result']);

//Count the amount  of results
//$suburb_count = count($suburb_list);
?>

<form method="get">
  <table width="308" border="0">
    <tr>
      <td width="95">Postcode:</td>
      <td width="98"><label>
        <input name="pcode" type="text" id="pcode" onblur="this.form.submit()" style="width: 40px;"onchange='this.form.submit()' value="<?php echo htmlspecialchars($_GET['pcode']); ?>" />
      </label></td>
      <td width="88"></td>
    </tr>
    <tr>
      <td>Suburb:</td>
      <td><label>
<?php
echo'<select name="city">';
//Loop through the array "results" and find all values for "Town"
foreach ($suburb_list as $towns) {
    echo '<option value="'.$towns['Town'].'">'.$towns['Town'].'</option>';;
}
echo '</select>';

?>
      </label></td>
      <td></td>
    </tr>
    <tr>
      <td><label>
        <input type="submit" name="button" id="button" value="Submit" />
      </label></td>
      <td></td>
      <td></td>
    </tr>
  </table>

</form>

1 个答案:

答案 0 :(得分:0)

使用ajax,这样您就可以在不重新加载页面的情况下从服务器发送和检索数据。