基于jQuery实现仿51job城市选择功能实例代码

下面是关于“基于jQuery实现仿51job城市选择功能实例代码”的完整攻略。

1. 确定需求

在开始编写代码前，我们需要确认需求和预期效果。该项目所实现的功能是基于jQuery，模拟51job网站城市选择的交互效果，比如：

• 当鼠标移动到省份区块时，显示该省份下所有的城市；
• 点击城市可以进行城市切换；
• 点击“确认”按钮时，可以将选择后的城市信息传递给后端。

2. 引入必要脚本和样式文件

我们需要在HTML文档中引入必要的脚本和样式文件。

<!--引入jQuery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!--样式文件-->
<link rel="stylesheet" href="./css/citySelect.css">

<!--JS文件-->
<script src="./js/citySelect.js"></script>

3. 编写HTML结构

我们需要编写基本的HTML结构，包括省份和城市的容器、城市列表和确认按钮等。

<div class="city-select">
  <div class="province-container">
    <div class="province-item" data-province="北京">
      <span>北京</span>
    </div>
    <div class="province-item" data-province="上海">
      <span>上海</span>
    </div>
    <div class="province-item" data-province="广东">
      <span>广东</span>
    </div>
    ...
  </div>

  <div class="city-container">
    <div class="city-item" data-city="北京市">
      <span>北京市</span>
    </div>
    <div class="city-item" data-city="东城区">
      <span>东城区</span>
    </div>
    ...
  </div>

  <div class="button-container">
    <button class="confirm">确认</button>
  </div>
</div>

4. 确定CSS样式

我们需要确定基本的CSS样式以保证页面具有良好的交互性和可读性。

/*省份和城市容器*/
.province-container, .city-container {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1;
}

/*省份和城市列表项*/
.province-item, .city-item {
  padding: 5px 10px;
  cursor: pointer;
}

/*省份和城市选中状态*/
.province-item.active, .city-item.active {
  background-color: #e6f7ff;
}

/*确认按钮*/
.confirm {
  margin: 10px;
  padding: 5px 10px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  cursor: pointer;
}

5. 编写JS交互代码

接下来，我们需要编写JS代码，实现相关交互逻辑。

$(function() {
  //当鼠标移动到省份区块时，显示该省份下所有的城市
  $('.province-item').mouseover(function() {
    $('.city-container').hide(); //隐藏所有城市
    $(this).addClass('active').siblings().removeClass('active'); //切换选中状态
    var province = $(this).data('province'); //获取省份名称
    $('.city-container').find('[data-city^=' + province + ']').parent().show(); //显示对应城市
    $('.city-container').slideDown(150); // 展开城市列表
  });

  //点击城市，进行城市切换
  $('.city-item').click(function() {
    $(this).addClass('active').siblings().removeClass('active'); //切换选中状态
  });

  //确认按钮，向后端传递选择后的城市信息
  $('.confirm').click(function() {
    var province = $('.province-item.active').data('province'); //获取当前选中的省份名称
    var city = $('.city-item.active').data('city'); //获取当前选中的城市名称
    alert('你选择了：' + province + ' - ' + city); //弹窗显示选择结果
  });

  //隐藏城市列表
  $('.city-container').mouseleave(function() {
    $('.city-container').slideUp(150);
  });
});

示例说明1

我们可以通过添加新的省份，来进行示例展示。

<div class="province-item" data-province="江苏">
  <span>江苏</span>
</div>

<div class="city-item" data-city="南京市">
  <span>南京市</span>
</div>
<div class="city-item" data-city="苏州市">
  <span>苏州市</span>
</div>
<div class="city-item" data-city="无锡市">
  <span>无锡市</span>
</div>

我们只需要在HTML文档中添加新的省份和城市即可。这里我们添加了一个名为“江苏”的省份，以及其下属的3个城市。

示例说明2

我们可以在JS代码中添加新的交互逻辑，以改善用户体验。

//当省份没有对应城市时，进行提醒
$('.province-item').click(function() {
  var province = $(this).data('province');
  if ($('.city-container').find('[data-city^=' + province + ']').length === 0) {
    alert('该省份没有对应城市！');
  }
});

当用户点击一个省份时，如果该省份没有对应城市，则弹窗进行提醒。这样可以避免用户对没有城市的省份进行无效点击。