1. Python技术站首页
  2. jquery

JS实现省市县三级下拉联动

• jquery

JS实现省市县三级下拉联动是前端开发中比较常见的需求，可以让用户更方便地选择地址信息。下面我将分享一下我对于这个需求的实现思路和具体操作步骤。

实现思路

省市县三级下拉联动的实现思路其实比较简单，大体可以分为以下几个步骤：

  1. 创建一个包含省市县的地址数据，这个数据可以是JSON格式的对象，也可以是从后台接口获取的数据。
  2. 给省份下拉列表绑定change事件，当省份选项发生变化时，根据省份获取该省份下所有的城市，并动态生成城市下拉列表。
  3. 给城市下拉列表绑定change事件，当城市选项发生变化时，根据城市获取该城市下所有的县区，并动态生成县区下拉列表。
  4. 将用户选择的省市县信息进行合并处理，可以通过隐藏域等方式将其提交给后台。

具体操作步骤

下面是我编写的一个简单示例程序，来实现简单的省市县三级下拉联动效果。

  1. HTML结构

首先，我们需要编写HTML结构，这里我写了三个下拉列表，分别用于选择省份、城市和县区，还有一个隐藏的文本框用于存储用户选择的地址信息。

<select id="province">
  <option value="">请选择省份</option>
</select> 
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>
<input type="hidden" id="address" name="address" value="">
  1. JS代码

接下来，我们需要编写JS代码来实现下拉列表的联动效果。代码中首先定义了一个包含省份、城市和县区信息的JSON对象，然后根据这个对象生成省份选项，当用户选择省份时，动态生成对应城市的选项，当用户选择城市时，动态生成对应县区的选项。

// 地址数据（省份、城市、县区）
var addressData = [
  {
    name: '湖南省',
    cities: [
      {
        name: '长沙市',
        counties: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区']
      },
      {
        name: '株洲市',
        counties: ['荷塘区', '芦淞区', '石峰区', '天元区', '醴陵市']
      },
      {
        name: '湘潭市',
        counties: ['雨湖区', '岳塘区', '湘乡市', '韶山市']
      }
    ]
  },
  {
    name: '广东省',
    cities: [
      {
        name: '广州市',
        counties: ['荔湾区', '越秀区', '海珠区', '天河区', '白云区']
      },
      {
        name: '深圳市',
        counties: ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区']
      },
      {
        name: '珠海市',
        counties: ['香洲区', '斗门区', '金湾区']
      }
    ]
  }
];

// 获取省份下拉框
var provinceSelect = document.getElementById('province');
// 动态生成省份选项
for (var i = 0; i < addressData.length; i++) {
  var provinceOption = document.createElement('option');
  provinceOption.innerHTML = addressData[i].name;
  provinceSelect.appendChild(provinceOption);
}

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // 去掉之前生成的选项
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份和城市生成县区选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      for (var j = 0; j < addressData[i].cities.length; j++) {
        if (addressData[i].cities[j].name === cityValue) {
          var counties = addressData[i].cities[j].counties;
          for (var k = 0; k < counties.length; k++) {
            var countyOption = document.createElement('option');
            countyOption.innerHTML = counties[k];
            countySelect.appendChild(countyOption);
          }
          break;
        }
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // 去掉之前生成的选项
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份生成城市选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      var cities = addressData[i].cities;
      for (var j = 0; j < cities.length; j++) {
        var cityOption = document.createElement('option');
        cityOption.innerHTML = cities[j].name;
        citySelect.appendChild(cityOption);
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + citySelect.value + '-' + countySelect.value;
  // 给城市下拉框绑定change事件
  citySelect.onchange = citySelectChange;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;
  1. 示例说明

下面我来介绍一下两个具体的示例。

示例1：使用JSON数据生成省份、城市和县区选项

在这个示例中，我直接使用一个包含省份、城市和县区信息的JSON对象，根据这个对象生成省份、城市和县区选项。

// 地址数据（省份、城市、县区）
var addressData = [
  {
    name: '湖南省',
    cities: [
      {
        name: '长沙市',
        counties: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区']
      },
      {
        name: '株洲市',
        counties: ['荷塘区', '芦淞区', '石峰区', '天元区', '醴陵市']
      },
      {
        name: '湘潭市',
        counties: ['雨湖区', '岳塘区', '湘乡市', '韶山市']
      }
    ]
  },
  {
    name: '广东省',
    cities: [
      {
        name: '广州市',
        counties: ['荔湾区', '越秀区', '海珠区', '天河区', '白云区']
      },
      {
        name: '深圳市',
        counties: ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区']
      },
      {
        name: '珠海市',
        counties: ['香洲区', '斗门区', '金湾区']
      }
    ]
  }
];

// 获取省份下拉框
var provinceSelect = document.getElementById('province');
// 动态生成省份选项
for (var i = 0; i < addressData.length; i++) {
  var provinceOption = document.createElement('option');
  provinceOption.innerHTML = addressData[i].name;
  provinceSelect.appendChild(provinceOption);
}

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // 去掉之前生成的选项
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份和城市生成县区选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      for (var j = 0; j < addressData[i].cities.length; j++) {
        if (addressData[i].cities[j].name === cityValue) {
          var counties = addressData[i].cities[j].counties;
          for (var k = 0; k < counties.length; k++) {
            var countyOption = document.createElement('option');
            countyOption.innerHTML = counties[k];
            countySelect.appendChild(countyOption);
          }
          break;
        }
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // 去掉之前生成的选项
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份生成城市选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      var cities = addressData[i].cities;
      for (var j = 0; j < cities.length; j++) {
        var cityOption = document.createElement('option');
        cityOption.innerHTML = cities[j].name;
        citySelect.appendChild(cityOption);
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + citySelect.value + '-' + countySelect.value;
  // 给城市下拉框绑定change事件
  citySelect.onchange = citySelectChange;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;

示例2：使用AJAX从后台获取省份、城市和县区数据

在这个示例中，我通过AJAX请求从后台获取省份、城市和县区数据，然后根据这个数据生成省份、城市和县区选项。

// 获取省份下拉框
var provinceSelect = document.getElementById('province');

// 根据地址获取省份、城市、县区数据
function getAddressData(callback) {
  // AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        callback(result);
      }
    }
  };
  xhr.open('GET', '/getAddressData', true);
  xhr.send();
}

// 动态生成省份选项
getAddressData(function(data) {
  var provinces = data.provinces;
  for (var i = 0; i < provinces.length; i++) {
    var provinceOption = document.createElement('option');
    provinceOption.innerHTML = provinces[i];
    provinceSelect.appendChild(provinceOption);
  }
});

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // AJAX请求，根据省份和城市获取县区数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        var counties = result.counties;
        var countySelect = document.getElementById('county');
        countySelect.innerHTML = '<option value="">请选择县区</option>';
        for (var i = 0; i < counties.length; i++) {
          var countyOption = document.createElement('option');
          countyOption.innerHTML = counties[i];
          countySelect.appendChild(countyOption);
        }
      }
    }
  };
  xhr.open('GET', '/getCountyData?province=' + encodeURIComponent(provinceValue) + '&city=' + encodeURIComponent(cityValue), true);
  xhr.send();
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // AJAX请求，根据省份获取城市数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        var cities = result.cities;
        var citySelect = document.getElementById('city');
        var countySelect = document.getElementById('county');
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        countySelect.innerHTML = '<option value="">请选择县区</option>';
        for (var i = 0; i < cities.length; i++) {
          var cityOption = document.createElement('option');
          cityOption.innerHTML = cities[i];
          citySelect.appendChild(cityOption);
        }
        // 给城市下拉框绑定change事件
        citySelect.onchange = citySelectChange;
      }
    }
  };
  xhr.open('GET', '/getCityData?province=' + encodeURIComponent(provinceValue), true);
  xhr.send();
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + document.getElementById('city').value + '-' + document.getElementById('county').value;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;

以上就是我对于JS实现省市县三级下拉联动的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现省市县三级下拉联动 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Easy UI jQuery介绍

    EasyUI jQuery介绍 EasyUI是一个基于jQuery的开源UI库，提供了一系列易用的UI组件，能够帮助开发者更快捷地构建互联网应用程序。EasyUI包含了常见的UI组件，如：对话框，表格，树形菜单，下拉框，日期选择器等等。 EasyUI特点 丰富的组件：EasyUI提供了多种常用的UI控件，用于构建各种形式的web应用。 简单易用：EasyUI…

    jquery 2023年5月13日
    00

  • jQWidgets jqxFormattedInput dropDown属性

    jQWidgets jqxFormattedInput dropDown属性 jQWidgets是一个基于jQuery的UI组件库，提供了丰富的UI组件和工具包括表格、历下拉单等。jqxFormattedInput是QWidgets的组件之一，用于创建格式化的输入框。dropDown属性是jqxFormattedInput的一个属性，用于设置下拉框的属性。 …

    jquery 2023年5月9日
    00

  • 原生JS和jQuery版实现文件上传功能

    实现文件上传功能是网站开发中常见的需求之一。下面是原生JS和jQuery版实现文件上传功能的完整攻略。 原生JS版实现文件上传功能 原生JS版实现文件上传功能需要借助HTML5的FormData对象进行文件数据的封装和提交。 HTML代码 首先，在HTML代码中添加一个表单，表单内包含一个input[type=file]用于选择文件，以及一个按钮用于提交表单…

    jquery 2023年5月27日
    00

  • jQWidgets jqxExpander展开事件

    jQWidgets jqxExpander展开事件 jQWidgets是一个基于jQuery的UI组件库，提供了丰富UI组件和工具包括表格下拉等。jqxExpander是jQWidgets的一个组件，用于创建可折叠的面板。jqxExpander提供了多个事件，其中包括展开事件。本文将详细介绍jqxExpander的展开事件，并提供两个示例。 jqxExpan…

    jquery 2023年5月9日
    00

  • jQWidgets jqxScheduler getSelection()方法

    以下是关于 jQWidgets jqxScheduler getSelection() 方法的详细攻略。 jQWidgets jqxScheduler getSelection() 方法 jQWidgets jqxScheduler 的 getSelection 方法用于获取用户选择的日期范围。 语法 $(‘#scheduler’).jqxScheduler…

    jquery 2023年5月12日
    00

  • 如何用jQuery选择段落内的所有链接

    在jQuery中，可以使用选择器选择DOM中的元素。以下是如何使用jQuery选择段落内的所有链接的完整攻略： 步骤一：选择段落 首先，需要选择包含链接的段落。可以使用选择器选择段落元素。以下是一个示例： // Select the paragraph containing links using jQuery var myParagraph = $(&qu…

    jquery 2023年5月9日
    00

  • 如何使用jQuery获得焦点元素

    使用jQuery获得焦点元素，需要用到jQuery中提供的焦点相关的方法。具体步骤如下所示： 步骤1：引入jQuery库 首先需要在页面中引入jQuery库，例如： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></s…

    jquery 2023年5月12日
    00

  • jQWidgets jqxTabs enable()方法

    下面是关于 jQWidgets jqxTabs enable() 方法的详细攻略。 什么是 jQWidgets jqxTabs jQWidgets 是一个基于jQuery框架的UI 组件库，提供了许多交互式和响应式的UI组件。其中之一就是jqxTabs组件，它是可以通过点击标签页快速切换不同内容的切换组件。 enable() 方法介绍 jqxTabs 的 e…

    jquery 2023年5月12日
    00
合作推广
合作推广
分享本页
返回顶部