使用jQuery AJAX实现HTML联动SELECT下拉框填充

现有代码的问题修正点 #

• AJAX请求地址错误：你填写的是GitHub上文件的网页预览链接，直接请求会返回带页面导航、交互脚本的HTML内容，根本不是纯JSON格式的数据源，自然无法正常解析
• AJAX参数不符合jQuery规范：
  • 参数名拼写错误：datatype 大小写不对，jQuery要求写为dataType
  • 跨域配置写法错误：Access-Control-Allow-Origin是服务端返回的响应头，客户端在请求里根本设置不了这个头，自然也实现不了跨域放开
• HTML标签用法错误：JS文件不能用<link>标签引（这个标签是专门加载CSS样式的），得换成<script>标签加载，而且本地JS文件的引用要放在</body>闭合标签前面

完整可运行代码 #

页面结构 #

<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>下拉联动Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <select class="states">
        <option value="">-- 请选择邦 --</option>
      </select>
      <select class="districts">
        <option value="">-- 请选择区县 --</option>
      </select>
    </div>
    <script src="index.js"></script>
  </body>
</html>

交互逻辑 #

// 全局缓存全量邦区数据，避免重复请求
let fullDistrictData = null;
$(document).ready(function(){
  $.ajax({
    type: 'GET',
    // 替换为对应JSON文件的原始纯文本访问地址
    url: '对应JSON数据源的原始路径',
    dataType: 'json',
    cache: true
  })
  .done(function(res){
    fullDistrictData = res.states;
    // 遍历填充邦选择下拉框
    fullDistrictData.forEach(state => {
      $('.states').append(`<option value="${state.state}">${state.state}</option>`)
    })
  })
  .fail(error => {
    console.error('数据加载失败，请检查请求地址', error)
  })

  // 绑定邦选择框的选中变化事件，联动加载区县
  $('.states').on('change', function(){
    const currentSelectedState = $(this).val();
    // 重置区县下拉框
    $('.districts').empty().html('<option value="">-- 请选择区县 --</option>')
    // 无选中值或无缓存数据时直接返回
    if(!currentSelectedState || !fullDistrictData) return

    // 匹配选中邦对应的区县列表
    const matchedStateInfo = fullDistrictData.find(item => item.state === currentSelectedState)
    if(matchedStateInfo?.districts?.length){
      matchedStateInfo.districts.forEach(district => {
        $('.districts').append(`<option value="${district}">${district}</option>`)
      })
    }
  })
})

落地注意事项 #

• 需将请求地址替换为JSON文件的原始纯文本访问路径，不要使用带页面导航的预览页链接
• 首次加载拿到全量数据后存在内存中即可，不需要每次切换下拉框时重复发起请求，可大幅提升交互流畅度
• 如果遇到浏览器跨域拦截，可将JSON文件同步到自己的项目服务目录下，直接请求本地路径即可规避跨域限制

内容的提问来源于stack exchange，提问作者jeno