使用ajax（JQuery）在html文档中填充选择答案

【问题标题】：Populating select in html document using ajax (JQuery)使用ajax（JQuery）在html文档中填充选择
【发布时间】：2021-02-03 08:25:57
【问题描述】：

问题：我正在尝试在加载时填充第一个 SELECT。第二个 SELECT 取决于第一个。
第一个选择：填充状态
第二个选择：应根据所选州填充地区。
JSON文件是HERE
其他 stackoverflow 文档上给出的解决方案不符合我的要求\

$(document).ready(function(){
  $.ajax({
    type:'GET',
    header:{' Access-Control-Allow-Origin ':'*'},
    datatype:'json',
    url:'https://github.com/sab99r/Indian-States-And-Districts/blob/master/states-and-districts.json'
  })
  .done(function(response){
    console.log(response);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <div class="">
      <select class="states" >
      </select>
      <select class="districts" >
      </select>
    </div>
    <link rel="text/script" href="jquery-3.5.1.js">
    <link rel="text/>script" href="index.js">
  </body>
</html>

【问题讨论】：

当你的第一个选择的结果准备好（jQuery成功函数），去第二个请求
能否详细说明。我不懂诶。你是说在 ajax 里面的 url 之后添加成功属性吗？
1) 加载 json 2) 当 json 完成加载，然后填充 select。 “当 json 加载时”是“jquery 成功函数” - 在您的代码中 done

标签： javascript jquery json ajax

【解决方案1】：

下面的例子展示了如何加载数据的示例，首先将其存储在一个 var 来防止 ajax 加载每次更改，然后在每次更改中获取数据数组以加载分区：

( uring raw url load text ，所以你必须首先从字符串中删除 json )

参见 wokring sn-p ：

data = [];

$(document).ready(function() {

  $(".states").on("change", stateChange);

  $.ajax({
      type: 'GET',
      header: {
        ' Access-Control-Allow-Origin ': '*'
      },
      datatype: 'json',
      url: 'https://raw.githubusercontent.com/sab99r/Indian-States-And-Districts/master/states-and-districts.json'
    })
    .done(function(response) {
      var resp = JSON.parse(response);
      loadStates(resp);
    })

});


var loadStates = function(response) {

  if (response.states) {
    data = response.states;

    response.states.forEach(state => {

      var option = $('<option/>');
      option.attr({
        'value': state.state,
      }).text(state.state);
      $('.states').append(option);
    })
  }
}

var stateChange = function(event) {
  let stateValue = event.target.value;
  let state = data.find(state => state.state === stateValue);
  
  $('.districts').html("");

  if (state) {

    state.districts.forEach(ditrict => {
      var option = $('<option/>');
      option.attr({
        'value': ditrict,
      }).text(ditrict);
      $('.districts').append(option);
    })

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
state :
<select class="states">
</select>
<br> distric
<select class="districts">
</select>

【讨论】：

如果我正在加载本地 json 文件。然后我不需要解析。对 /
不，这取决于你的服务器返回的数据类型，因为这里从 github 返回 text/plain，所以你必须从服务器返回 application/json 然后使用不解析
是的。正如您所说，我将其更改为 application/json 并且工作正常。谢谢

【解决方案2】：

只需根据您的要求设置代码，但您需要设置所有逻辑。发送状态数据时需要设置，然后你会得到所有地区

function changeselect(){
$.ajax({
    type:'GET',
    header:{' Access-Control-Allow-Origin ':'*'},
    datatype:'json',
    url:'https://github.com/sab99r/Indian-States-And-Districts/blob/master/states-and-districts.json'
  })
  .done(function(response){
    console.log(response);
    response.foreach(function(data){
    $("#distr").append("<option>+data+</option>")
    })
  })
}
$(document).ready(function(){
  $.ajax({
    type:'GET',
    header:{' Access-Control-Allow-Origin ':'*'},
    datatype:'json',
    url:'https://github.com/sab99r/Indian-States-And-Districts/blob/master/states-and-districts.json'
  })
  .done(function(response){
    console.log(response);
    response.foreach(function(data){
    $("#distr").append("<option>+data+</option>")
    })
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <div class="">
      <select class="states" onchange="changeselect()">
      <option>A</option>      
      <option>B</option>      
      <option>C</option>


      </select>
      <select class="districts" id="distr">
      </select>
    </div>
    <link rel="text/script" href="jquery-3.5.1.js">
    <link rel="text/>script" href="index.js">
  </body>
</html>

【讨论】：

@jeno 如果可行，请接受我的回答谢谢

【解决方案3】：

我有一个更短的代码来做。
我们可以使用 ajax GET 从任何存储库的原始数据中获取数据。
上述问题的解决方案：

$.get('https://raw.githubusercontent.com/aps08/web-development/main/web-dev-series/JSON/indian-states-and-cities.json',  // url
        function (data1, textStatus, jqXHR) {  // success callback
          var data1 = JSON.parse(data1);
          load(data1);
      });

请记住，如果您从本地计算机加载数据，则需要删除
var data1 =JSON.parse(data1) 线

【讨论】：