最后效果如下:
在更改city选项时候,触发自动更改District的选项
代码如下:
//AddressController.php
/**
* Edits a addres
*
* @param string $uid
*/
public function editAction($uid)
{
if (!$this->request->isPost()) {
$addres = Address::findFirstByuid($uid);
if (!$addres) {
$this->flash->error("addres was not found");
return $this->dispatcher->forward(array(
"controller" => "address",
"action" => "index"
));
}
$this->view->CITY = AddressDef::$CITY;
$this->view->DISTRICT = AddressDef::$DISTRICT[$addres->city];
$this->view->uid = $addres->uid;
//设定好默认值
$this->tag->setDefault("city", $addres->city);
$this->tag->setDefault("district", $addres->district);
$this->tag->setDefault("zone", $addres->zone);
$this->tag->setDefault("building", $addres->building);
$this->tag->setDefault("unit", $addres->unit);
$this->tag->setDefault("room", $addres->room);
$this->tag->setDefault("remark", $addres->remark);
}
}
[/codesyntax]
[codesyntax lang="php"]
/*address/edit.phtml*/
<table>
<tr>
<td align="right">
<label for="city">City</label>
</td>
<td align="left">
<?php echo $this->tag->selectStatic(array("city", $CITY, "onchange"=>"loadXMLDoc()"));?>
</td>
</tr>
<tr>
<td align="right">
<label for="district">District</label>
</td>
<td align="left">
<?php echo $this->tag->selectStatic(array("district", $DISTRICT));?>
</td>
</tr>
<tr>
<td align="right">
<label for="zone">Zone</label>
</td>
<td align="left">
<?php echo $this->tag->textField(array("zone", "type" => "number")) ?>
</td>
</tr>
<tr>
<td align="right">
<label for="building">Building</label>
</td>
<td align="left">
<?php echo $this->tag->textField(array("building", "type" => "number")) ?>
</td>
</tr>
<tr>
<td align="right">
<label for="unit">Unit</label>
</td>
<td align="left">
<?php echo $this->tag->textField(array("unit", "type" => "number")) ?>
</td>
</tr>
<tr>
//.............
phaclon中input控件可以这么写
<?php echo $this->tag->textField(array("zone", "type" => "number")) ?>
上面的语句呈现出的html语句就是
<input type="text" id="zone" name="zone" value="3" />
其中value="3"是在controller中
$this->tag->setDefault("zone", $addres->zone);
来控制的
select控件可以这么写
<?php echo $this->tag->selectStatic(array("city", $CITY, "onchange"=>"loadXMLDoc()"));?>
其中的$CITY是在controller中这里定义的
$this->view->CITY = AddressDef::$CITY;
onchange事件,触发执行loadXMLDoc()
<script>
function loadXMLDoc()
{
var xmlhttp;
//通过id名city获取到控件对象
var city=document.getElementById("city");
//获取到当前选择的值
var cityvalue=city.options[city.selectedIndex].value;
console.log(cityvalue);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var districts=xmlhttp.responseText;
//获取到名为district的select的组件
var district=document.getElementById("district");
//先清空
district.length=0;
//将从后端返回的json字符串转为javascript数组
districts=eval("("+districts+")");
console.log(districts);
//遍历数组
$.each(districts,function(key,value){
console.log("key:"+key+";value:"+value);
//添加select的options选项
district.options.add(new Option(value,key));
});
}
}
console.log("/address/getDistrict/"+cityvalue);
xmlhttp.open("GET","/address/getDistrict/"+cityvalue, true);
xmlhttp.send();
}
</script>
对应在controller中后端接口如下
public function getDistrictAction($city){
//这句很重要,不然返回的就不止json的字符串,还有外围的很多html
$this->view->setRenderLevel(0);
if (!$this->request->isGet()) {
$this->flash->error("invalid action!");
}
$feed = AddressDef::$DISTRICT[$city];
//JSON_UNESCAPED_UNICODE为了汉字能正确编码解析
echo json_encode($feed,JSON_UNESCAPED_UNICODE);
}