使用 ajax (JQuery) 在 html 文檔中填充 select

Question

問題：我試圖在負載時填充第一個 SELECT。 第二個 SELECT 取決於第一個。
第一個 select：填充狀態
2nd select：應根據所選州填充地區。
jSON 文件在這里
其他 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>

Answer 1

下面的示例展示了如何加載數據的示例，首先將其存儲在 var 中以防止 ajax 加載每個更改，然后在每個更改中獲取數據數組以加載分區：

（處理原始 url 加載文本，因此您必須首先從字符串中刪除 json ）

請參閱工作片段：

 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>

Answer 2

只需根據您的要求設置代碼，但您需要設置所有邏輯。 您需要在發送 state 數據時進行設置，然后您將獲得所有區

 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>

Answer 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)行

使用 ajax (JQuery) 在 html 文檔中填充 select

問題描述

3 個解決方案

解決方案1
2 已采納 2021-02-03 09:24:57

解決方案2
0 2021-02-03 09:24:45

解決方案3
0 2021-03-15 16:40:29

使用 ajax (JQuery) 在 html 文檔中填充 select

問題描述

3 個解決方案

解決方案1 2 已采納 2021-02-03 09:24:57

解決方案2 0 2021-02-03 09:24:45

解決方案3 0 2021-03-15 16:40:29

解決方案1
2 已采納 2021-02-03 09:24:57

解決方案2
0 2021-02-03 09:24:45

解決方案3
0 2021-03-15 16:40:29