省市二级菜单联动，下部显示对应相关内容（类宝岛眼镜）
html-js：
<div class="container baodao_old">
<div class="w_270 mt15">
<div class="tabs clearfix">
<a href="#">啊啊啊</a>
<a href="javascript:void(0)" class="highlight">啊啊啊</a>
</div>
<div class="bb_e7e2f0 p_tb10">
<div class="switch" lbs="false">
<span class="icons_bg"></span>
</div>
<div class="state_txt">
<div class="state_txt_container">啊啊啊
<br>啊啊啊
</div>
</div>
<div class="clear-both"></div>
</div>
<div class="info bt_646464 bb_e7e2f0 p_tb10 clearFloat">
<div class="select">
{$province}
</div>
</div>
<div id="show"></div>
<div class="bt_646464 p_tb10 store" id="address_list"></div>
<div id="loading_content" class="loading_content">
<img style="margin: 0 auto;" src='{pigcms::RES}/xiyi/img/loading.png'>
</div>
<a href="javascript:void(0);" class="more mt15" id="more">点击加载更多</a>
</div>
</div>
</div>
<script>
$(function() {
HELP.redrawSelect($('select'));
$(".switch").click(function() {
$(this).children("span").toggleClass("switch_current");
$(this).next().children('div').toggleClass('switchtexttips');
$('#selectarea').toggleClass('switchselect');
if ($(this).attr('lbs') == 'false') {
getGeoInfo();
$(this).attr('lbs', 'true');
} else {
clearSelect();
$(this).attr('lbs', 'false');
}
});
$("div[tag=list]").on('click', function() {
if ($(this).parent(".tpl_list").hasClass('pay_current')) {
$('.tpl_list').removeClass('pay_current');
} else {
$('.tpl_list').removeClass('pay_current');
$(this).parent(".tpl_list").addClass('pay_current');
}
});
});
var menu = {
page: 1,
disable: false,
limit: 10
};
var loadAjaxList = function() {
if (menu.disable == true) return;
$('#more').hide();
$('#loading_content').show();
$.ajax({
url: 'index.php?g=Wap&m=Xiyi&a=slist&token=<?php echo $_GET['token']; ?>',
type: 'GET',
data: menu,
cache: true,
dataType: 'JSON',
error: function() {
console.log('加载失败，请重试');
},
success: function(result) {
menu.page++;
$('#address_list').html(result);
if (!result || 11 < menu.limit) {
$('#more').hide();
$('#loading_content').hide();
menu.disable = true;
} else {
$('#more').fadeIn();
}
}
});
};
$(function() {
$('#more').on('click', function() {
loadAjaxList();
});
$('#province').change(function() {
var province = $('#province').val();
menu = {
page: 1,
disable: false,
limit: 10,
province: province,
city: 0
};
$('#address_list').empty();
//loadAjaxList();
$.ajax({
url: 'index.php?g=Wap&m=Xiyi&a=slist&token=<?php echo $_GET['token']; ?>',
type: 'GET',
data: {
province_id: province
},
cache: true,
dataType: 'JSON',
error: function() {
console.log('加载失败，请重试');
$(".switch").click();
},
success: function(result) {
$('#city').get(0).length = 1;
$.post("index.php?g=Wap&m=Xiyi&a=liebie&token=<?php echo $_GET['token']; ?>&tid=" + province,function(data){
$("#city").html(data);(获取对应省份下的市区)
},"text"//设置了获取数据的类型，所以得到的数据格式为text类型的
);
$('#city').next('.selecttext').text('市/区');//再次选择省时，将会显示市/区
$('#address_list').html(result);
}
});
});
$('#city').change(function() {
var city = $('#city').val();
var province = $('#province').val();
menu = {
page: 1,
disable: false,
limit: 10,
province: province,
city: city
};
$('#address_list').empty();
loadAjaxList();
});
});
</script>
php：
public function slist(){
$province = $_GET['province_id'];
$city = $_GET['city'];
if($province && empty($city)){
$list = M('Xiyi_shop')->where(array('province'=>$province,'token'=>$this->token))->order('id desc')->select();
}elseif(!$province && empty($city)){
$list = M('Xiyi_shop')->where(array('token'=>$this->token))->order('id desc')->select();
}else{
$list = M('Xiyi_shop')->where(array('city'=>$city,'token'=>$this->token))->order('id desc')->select();
}
$data = "";
foreach($list as $value){
$data .= '<div class="tpl_list">
<div class="tpl_list_l">
<strong>'.$value['shopname'].'</strong>
<p>'.$value['address'].'
<br>'.$value['tel'].'
<br>
</p>
</div>
<div class="tpl_list_r">
<a href="tel:'.$value['tel'].'" class="tel_btn"></a>
<a href="http://api.map.baidu.com/marker?location='.$value['lat'].','.$value['lng'].'&title=我的位置&content='.$value['shopname'].'&output=html" class="gps_btn" target="_black"></a>
</div>
<div class="clear-both"></div>
</div>';
}
$result = array($data);
$result = json_encode($result);
echo $result;
}
public function liebie(){
$tid = $_GET['tid'];
$token = $this->token;
if(!empty($tid)){
$ok = M('Xiyi_city')->where(array('parent_id'=>$tid,'token'=>$this->token))->select();
$area = "";
if($ok){
$area = "<option>请选择</option>";
foreach($ok as $k =>$val){
$area .= "<option value='".$val['id']."' >".$val['name']."</option>";
}
}else{
$area = "<option>无子栏目</option>";
}
echo $area;
}else{
$area = "<option>请选择</option>";
echo $area;
}
}
private function _getInput(){
$input = '';
$input .= '<div class="selectbox" tag="province"><select name="province" id="province"><option value="">省/直辖市</option>';
$sheng = M('Xiyi_city')->where(array('parent_id'=>'0','token'=>$this->token))->select();
foreach($sheng as $key=>$value){
$input .='<option value="'.$value[id].'" >'.$value['name'].'</option>';
}
$input .='</select><span class="selecttext">省/直辖市</span><span class="select-arrow"><a href="javascript:;" class="arrow"></a></span></div>';
$input .='<div class="selectbox selectbox-nom" tag="city"><select name="city" id="city"><option>市/区</option></select><span class="selecttext">市/区</span><span class="select-arrow"><a href="javascript:;" class="arrow"></a></span></div>';
return $input;
}
