一个门店省市店名三级联动

首先看一下三个按钮，

是用UL LI标签 展示，并且用一个隐藏的元素进行记录：

<div class="store_select">
	<?php $provinces = $this->getAllProvince();?>
	<?php echo $this->__('请前往')?>
	
		
		<ul name="store_province_ul" id="store_province_ul" class="store_province_ul">
			<li><span class="span_store_province" select_value=""><?php echo $this->__('请选择省');?></span></li>
			<?php foreach ($provinces as $row):?>
			<li value="<?php echo $row['province']?>"><span class="span_store_province" select_value="<?php echo $row['province']?>"><?php echo $row['province']?></span></li>
			<?php endforeach;?>
		</ul>
		<input type="hidden" value="" id="store_province" name="store_province" />
		
		<img id="load_city_ajax" src="<?php echo $this->getSkinUrl('images/ajax-loader.gif');?>" />
		
		<ul name="store_city_ul" id="store_city_ul" class="store_city_ul">
			<li><span class="span_store_city" select_value=""><?php echo $this->__('请选择市');?></span></li>
		</ul>
		<input type="hidden" value="" name="store_city" id="store_city" />
		
		<img id="load_title_ajax" src="<?php echo $this->getSkinUrl('images/ajax-loader.gif');?>" />
		
		<ul name="store_title_ul" id="store_title_ul" class="store_title_ul">
			<li><span class="span_store_title" select_value=""><?php echo $this->__('请选择门店')?></span></li>
		</ul>
		<input type="hidden" value="" name="store_title" id="store_title" />
		
	<?php echo $this->__('门店选购')?>
	<!--  <a href="#tip" id="fancy-option" style="display:none"></a> -->
	<span class="send_mobile"><a id="send_mo_btn" href="#send_add_mobile"><?php echo $this->__('地址发送到手机');?></a></span>
	<span class="view_store"><a href="<?php echo $this->getUrl().'store-locator-list';?>"><?php echo $this->__('查看门店地图');?></a></span>
	</div>

 2.然后看下JS，逻辑是这样的

我们要进行选择的是三个UL LI 下的元素。

为了模拟SELECT 效果，其逻辑略复杂，具体看代码

<script type="text/javascript">
/* storelocator/getstorelocator/getCityByProvince' */
(function($){	

	$('#load_city_ajax').hide();
	$('#load_title_ajax').hide();
	//将所有有值的身份进行隐藏：
	
	$('.span_store_province').each(function(){
		if ($(this).attr('select_value') == '') {
			$(this).parent().show();
		} else {
			$(this).parent().hide();
		}
	})

	//点击一个省份
	$('.span_store_province').live("click",function() {
		var select_province = $(this).attr('select_value');
		var expand = false;//目前展开状态：TRUE:展开，FLASE：闭合
		$('.span_store_province').each(function (){
			if ($(this).attr('select_value') != select_province && $(this).parent().is(":visible") == true) {
				expand = true;
			}
		})

		if (expand == false) {
			//需要展开所有的LI
			$('.span_store_province').each(function (){
				$(this).parent().show();
			})
		    
		} else {
			//需要关闭其他的LI,
			$('.span_store_province').each(function (){
				if ($(this).attr('select_value') != select_province) {
					$(this).parent().hide();
				} else {
					$(this).parent().show();
				}
			})
			//并且AJAX刷新CITY内容
			
			$('#store_province').val($(this).attr('select_value'));

			var curr_province = $('#store_province').val();
			if (curr_province) {
				$('#store_city_ul').hide();
				$('#load_city_ajax').show();
				$.getJSON("<?php echo $this->getUrl('storelocator/getstorelocator/getCityByProvince');?>",{province:curr_province}, function(data){
						var res = '<li><span class="span_store_city" select_value="">请选择市</span></li>';
					     $.each(data, function(i,item){
						     var city = item.city;
						     res += '<li style="display:none;"><span class="span_store_city" select_value="'+city+'">' + city + '</span></li>';
						  });
					     $('#store_city_ul').html(res);
					     $('#load_city_ajax').hide();
					     $('#store_city_ul').show();
			     });
				var res = '<li><span select_value="" class="span_store_title">请选择门店</span></li>';
				 $('#store_title_ul').html(res);
			     $('#load_title_ajax').hide();
			     $('#store_title_ul').show();
			} else {
				var res = '<li><span select_value="">请选择市</span></li>';
				$('#store_city_ul').html(res);
				$('#load_city_ajax').hide();
			    $('#store_city_ul').show();
				
			}
		}
		
	})
	
	$('.span_store_city').live("click",function() {
		var select_city = $(this).attr('select_value');
		var expand = false;//目前展开状态：TRUE:展开，FLASE：闭合
		$('.span_store_city').each(function(){
			if ($(this).attr('select_value') != select_city && $(this).parent().is(":visible") == true) {
				expand = true;
			}
		})

		if (expand == false) {
			$('.span_store_city').each(function (){
				$(this).parent().show();
			})
		} else {
			//关闭其他CITY
			$('.span_store_city').each(function (){
				if ($(this).attr('select_value') != select_city) {
					$(this).parent().hide();
				} else {
					$(this).parent().show();
				}
			})
			//请求其他的店铺TITLE
			$("#store_city").val($(this).attr('select_value'));
			var curr_city = $("#store_city").val();
			
			$('#store_title_ul').hide();
			$('#load_title_ajax').show();
			
			if (curr_city) {
				$.getJSON("<?php echo $this->getUrl('storelocator/getstorelocator/getTitleByCity');?>",{city:curr_city}, function(data){
					var res = '<li><span select_value="" class="span_store_title">请选择门店</span></li>';
				     $.each(data, function(i,item){
					     var title = item.title;
					     res += '<li style="display:none;"><span class="span_store_title"  select_value="'+title + '">' + title + '</span></li>';
					    
					  });
				     $('#store_title_ul').html(res);
				     $('#load_title_ajax').hide();
				     $('#store_title_ul').show();
		     	});
			} else {
				var res = '<li><span select_value="" class="span_store_title">请选择门店</span></li>';
				 $('#store_title_ul').html(res);
			     $('#load_title_ajax').hide();
			     $('#store_title_ul').show();
			}
		}
	})
	
	$('.span_store_title').live('click',function(){
		
		select_title = $(this).attr('select_value');
		
		var expand = false;//目前展开状态：TRUE:展开，FLASE：闭合

		$('.span_store_title').each(function(){
			if ($(this).attr('select_value') != select_title && $(this).parent().is(":visible") == true) {
				expand = true;
			}
		})

		if (expand == false) {
			//展开所有的
			$('.span_store_title').each(function(){
				$(this).parent().show();
			})
		} else {
			//闭合其他的
			$('.span_store_title').each(function(){
				if($(this).attr('select_value') != select_title) {
					$(this).parent().hide();
				}
			})
		}

		$("#store_title").val(select_title);
		
	})

     
})(jQuery);
</script>

 最后提一下上面2处有使用到AJAX访问请求，

方法是PHP写的：

<?php
class Bysoft_StoreLocator_GetstorelocatorController extends Mage_Core_Controller_Front_Action   
{ 
	public function getStoreLocatorAction(){
		$this->loadLayout();
		$this->renderLayout();
	}
	/*
	 * 从省名获取所有的城市名
	 */
	public function getCityByProvinceAction() {
		$read= Mage::getSingleton('core/resource')->getConnection('core_read');
		$province = $_REQUEST['province'];
		$city_arr = array();
		$sql = "
			SELECT `city` FROM `store_locator` WHERE `province` = '{$province}'
			GROUP BY `city`
		";
	
		echo json_encode($read->fetchAll($sql));
		
	}
	/*
	 * 从城市名获取各个店名
	 */
	public function getTitleByCityAction() {
		$read= Mage::getSingleton('core/resource')->getConnection('core_read');
		$city = $_REQUEST['city'];
		$title_arr = array();
		$sql = "
		SELECT `title` FROM `store_locator` WHERE `city` = '{$city}'
		GROUP BY `title`
		";
		echo json_encode($read->fetchAll($sql));
		
	}
	/*
	 * 从店名获取店信息（仅获取一条）
	 */
	public function getAddByTitleAction() {
		$read= Mage::getSingleton('core/resource')->getConnection('core_read');
		$title = $_REQUEST['title'];
		$sql = "
		SELECT * FROM `store_locator` WHERE `title` = '{$title}'
		limit 1
		";
		$results = array();
		foreach ($read->fetchAll($sql) as $row) {
			$address = $row['address'];
			$add_phone = explode(' ',$row['address']);
			if (isset($add_phone[0])) {
				$row['address'] = $add_phone[0];
			} else {
				$row['address'] = '';
			}
			if (isset($add_phone[1])) {
				$row['telephone'] = $add_phone[1];
			} else {
				$row['telephone'] = '';
			}
			
			$results[] = $row;
		}
		echo json_encode($results);
	}
}

 

纯属个人学习原创，如有问题，请多指教。

谢谢。