省市縣三級聯動小結
html前端程式碼
<div class="ui-page">
<div class="ui-container">
<div class="ui-border-bottom f-bg-white f-pl-16 f-pr-16 f-pt-16 f-mb-16">
<div class="ui-bfc f-fs-16 f-pb-12 f-pt-12">
<div class="ui-bfc-aside f-color-title">收件人姓名</div>
<input type="text" class="input-text" id="author" placeholder="請輸入姓名">
</div>
<div class="ui-bfc ui-border-top f-fs-16 f-pb-12 f-pt-12">
<div class="ui-bfc-aside f-color-title">收件人手機號碼</div>
<input type="text" class="input-text" id="tel" placeholder="請輸入手機號">
</div>
<div class="ui-bfc ui-border-top f-fs-16 f-pb-12 f-pt-12">
<div class="ui-bfc-aside f-color-title">地區資訊</div>
<select name="" id="sheng1" class="dizhi" onchange="soncate1(this.options[this.options.selectedIndex].value)">
<option value="0">省</option>
<volist name="sheng" id="vo">
<option value="{$vo.area_id}">{$vo.area_name}</option>
</volist>
</select>
<div class="col-lg-8" style="" id="shijuan1">
<select name="" id="" class="dizhi">
<option value="">市</option>
</select>
</div>
<div class="col-lg-8" style="" id="shijuan2">
<select name="" id="" class="dizhi">
<option value="">區/縣</option>
</select>
</div>
</div>
<div class="ui-bfc ui-border-top f-fs-16 f-pb-12 f-pt-12">
<div class="ui-bfc-aside f-color-title">詳細地址</div>
<input type="text" class="input-text" id="value" placeholder="詳細地址">
</div>
<div class="ui-bfc ui-border-top f-fs-16 f-pb-12 f-pt-12">
<div class="ui-bfc-aside f-color-title">郵編</div>
<input type="text" class="input-text" id="url" placeholder="選擇省市縣自動生成郵編" readonly>
</div>
<div class="m-btn-box f-pd-16">
<span class="ui-btn ui-btn-primary" onclick="create()">儲存</span>
</div>
</div>
</div>
<script>
//父類的點選事件
function soncate1(fid){
$.post("{:U('index/soncate1')}",{"fid":fid},function(t){
console.log(t);
$("#shijuan1").html(t);
});
}
</script>
<script>
//父類的點選事件
function soncate2(fid){
$.post("{:U('index/soncate2')}",{"fid":fid},function(t){
console.log(t);
$("#shijuan2").html(t);
});
}
</script>
<script>
//父類的點選事件
function soncate3(fid){
$.post("{:U('index/soncate3')}",{"fid":fid},function(t){
console.log(t);
$("#url").val(t);
});
}
</script>
php後臺程式碼:
//鍔ㄦ�佺殑鐢熸垚甯�
public function soncate1(){
$m_cms_city = M('cms_city');
$maps['parentid'] = I("post.fid");
// $maps['uid'] = getUID();
$sonArr = $m_cms_city->where($maps)->select();
if(!empty($sonArr)){
foreach ($sonArr as $v){
$opt .= "<option value='{$v['area_id']}'>{$v['area_name']}</option>";
}
}
//鐢熸垚絎簩涓笅鏉ユ
echo "<select name = 'shi' id='shi' class='dizhi' onchange='soncate2(this.options[this.options.selectedIndex].value)'><option value='0' selected='selected'>甯�</option>{$opt}</select>";
exit();
}
//鍔ㄦ�佺殑鐢熸垚鍖�
public function soncate2(){
$m_cms_city = M('cms_city');
$maps['parentid'] = I("post.fid");
$sonArr = $m_cms_city->where($maps)->select();
if(!empty($sonArr)){
foreach ($sonArr as $v){
$opt .= "<option value='{$v['area_id']}'>{$v['area_name']}</option>";
}
}
//鐢熸垚絎簩涓笅鏉ユ
echo "<select name = 'qu' id='qu' class='dizhi' onchange='soncate3(this.options[this.options.selectedIndex].value)'><option value='0' selected='selected'>鍖�/鍘�</option>{$opt}</select>";
exit();
}
//鍔ㄦ�佺殑鐢熸垚閭紪
public function soncate3(){
$m_cms_city = M('cms_city');
$maps['area_id'] = I("post.fid");
$sonArr = $m_cms_city->where($maps)->find();
echo $sonArr['zipcode'];
exit();
}