Я хочу создать эту страну / штат, но я не могу определить, где разместить файл json. Кто-нибудь, кто может мне помочь? - PullRequest
Новая
       7

Я хочу создать эту страну / штат, но я не могу определить, где разместить файл json. Кто-нибудь, кто может мне помочь?

0 голосов
/ 18 февраля 2020

Я начинающий разработчик и хочу использовать этот скрипт для выбора страны / штата / города, и у меня есть страны, штаты, города в формате json, но где загрузить этот файл json?

Это веб-сайт Wordpress, тема Generatepress и Elementor.

https://www.webslesson.info/2017/05/json-dynamic-dependent-select-box-using-jquery-and-ajax.html

Большое спасибо, Мартин! 

<!DOCTYPE html>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 load_json_data('country');

 function load_json_data(id, parent_id)
 {
  var html_code = '';
  $.getJSON('country_state_city.json', function(data){

   html_code += '<option value="">Select '+id+'</option>';
   $.each(data, function(key, value){
    if(id == 'country')
    {
     if(value.parent_id == '0')
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
    else
    {
     if(value.parent_id == parent_id)
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
   });
   $('#'+id).html(html_code);
  });

 }

 $(document).on('change', '#country', function(){
  var country_id = $(this).val();
  if(country_id != '')
  {
   load_json_data('state', country_id);
  }
  else
  {
   $('#state').html('<option value="">Select state</option>');
   $('#city').html('<option value="">Select city</option>');
  }
 });
 $(document).on('change', '#state', function(){
  var state_id = $(this).val();
  if(state_id != '')
  {
   load_json_data('city', state_id);
  }
  else
  {
   $('#city').html('<option value="">Select city</option>');
  }
 });
});
</script>

[
 {
  "id":"1",
  "name":"USA",
  "parent_id":"0"
 }, 
 {
  "id":"2",
  "name":"Canada",
  "parent_id":"0"
 }, 
 {
  "id":"3",
  "name":"Australia",
  "parent_id":"0"
 }, 
 {
  "id":"4",
  "name":"New York",
  "parent_id":"1"
 }
]


  [1]: https://www.webslesson.info/2017/05/json-dynamic-dependent-select-box-using-jquery-and-ajax.html
...