首先看一下三个按钮，

是用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);}
}

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

谢谢。