jQuery select二级联动

原创

mob649e8167c4a3 2023-07-21 19:43:02 ©著作权

文章标签 二级联动 jQuery 示例代码 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8167c4a3的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery select二级联动

简介

在网页开发中，我们经常需要实现一些表单的联动效果，比如选择一个省份后，根据省份的选择结果，再动态加载该省份的城市列表。这种形式的联动称为二级联动，是常见的交互设计之一。本文将介绍如何使用jQuery实现select二级联动，并提供示例代码帮助读者更好地理解和使用。

实现思路

二级联动的实现原理很简单，主要包含以下几个步骤：

监听第一个select的change事件，获取选中的值。
根据选中的值，发送异步请求获取对应的数据。
根据返回的数据，动态生成第二个select的选项。
监听第二个select的change事件，获取选中的值。

示例代码

下面是一个简单的示例代码，演示了如何使用jQuery实现select二级联动。假设有两个select元素，一个用于选择省份，另一个用于选择城市。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery select二级联动示例</title>
  <script src="
</head>
<body>
  <select id="province">
    <option value="">请选择省份</option>
    <option value="1">广东省</option>
    <option value="2">浙江省</option>
    <option value="3">江苏省</option>
  </select>
  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <script>
    $(document).ready(function() {
      // 监听省份select的change事件
      $('#province').change(function() {
        var provinceId = $(this).val();
        
        // 发送异步请求获取对应的城市数据
        $.ajax({
          url: '/api/getCities',
          type: 'GET',
          data: { provinceId: provinceId },
          success: function(data) {
            // 清空城市select的选项
            $('#city').empty();
            // 动态生成城市select的选项
            for (var i = 0; i < data.length; i++) {
              $('#city').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
            }
          }
        });
      });
      
      // 监听城市select的change事件
      $('#city').change(function() {
        var cityId = $(this).val();
        console.log('选中的城市ID为：' + cityId);
      });
    });
  </script>
</body>
</html>

在上述示例代码中，我们监听了省份select的change事件，当选择一项省份后，就会发送异步请求/api/getCities，同时将选中的省份id作为参数传递给后端。后端根据省份id查询对应的城市数据，并返回给前端。前端通过data参数接收到后端返回的数据，然后动态生成城市select的选项。

同时，我们还监听了城市select的change事件，当选择一项城市后，就会打印出选中的城市id。