使用 json 的依赖下拉列表

Question

我目前正在开发动态依赖下拉菜单。我想要一个侧边栏，每个下拉列表都取决于它上面的那个，所以你根据你的选择，正确的数据将显示在下一个选择中。它应该是国家 - >年份 - >条款 - >电影。我不知道为什么我的数据不会从 json 文件中检索数据。我是编程新手，所以非常感谢任何帮助。

Json文件(moviessimple.js)格式如下：

  {
  "term": "2020W",
  "Year": 2018,
  "link": "https://www.imdb.com/title/tt6342440",
  "title": "Funan",
  "country": "France"
},
{
  "term": "2020W",
  "Year": 2017,
  "link": "https://www.imdb.com/title/tt6516966",
  "title": "And Then They Came for Us",
  "country": "United States"
},
{
  "term": "2020W",
  "Year": 2019,
  "link": "https://www.imdb.com/title/tt6751668",
  "title": "Parasite",
  "country": "South Korea"
},

现在，我的 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Test2</title>
        <script src="CountryPoints.js" type="text/javascript"></script>
        <script src="moviessimple.js"></script>
    </head>
    <body>
        <br /><br />
        <div class="container">

            <div>
                <select name="country" id="country" class="form-control input-lg">
                    <option value="">Select country</option>
                </select>
                <br /><br />
                <select name="Year" id="Year" class="form-control input-lg">
                    <option value="">Select year</option>
                </select>
                <br /><br />
                <select name="title" id="title" class="form-control input-lg">
                    <option value="">Select movies</option>
                </select>
            </div>
        </div>
<script>
    $(document).ready(function(){
    
     load_json_data('country');
    
     function load_json_data(country, Year)
     {
      var html_code = '';
      $.getJSON('moviessimple.js', function(data){
    
       html_code += '<option value="">Select '+country+'</option>';
       $.each(data, function(key, value){
        if(country == 'country')
        {
         if(value.Year == '')
         {
          html_code += '<option value="'+value.country+'">'+value.title+'</option>';
         }
        }
        else
        {
         if(value.Year == Year)
         {
          html_code += '<option value="'+value.country+'">'+value.title+'</option>';
         }
        }
       });
       $('#'+country).html(html_code);
      });
    
     }
    
     $(document).on('change', '#country', function(){
      var country_id = $(this).val();
      if(country_id != '')
      {
       load_json_data('Year', country_id);
      }
      else
      {
       $('#Year').html('<option value="">Select year</option>');
       $('#title').html('<option value="">Select movies</option>');
      }
     });
     $(document).on('change', '#Year', function(){
      var Year_id = $(this).val();
      if(Year_id != '')
      {
       load_json_data('title', Year_id);
      }
      else
      {
       $('#title').html('<option value="">Select movies</option>');
      }
     });
    });
    </script>
    </body>
</html>

Answer 1

您只需要从服务器获取一次data，将其保存到全局变量，然后从其他函数更新下拉列表

var movieData = [];
var html_code = '';
load_json_data('country');

function load_json_data(country, Year) {
  /*
  // to apply in your page
  $.getJSON('moviessimple.js', function (data) {
    movieData = data;
    $.each(movieData, function (index, value) {
      html_code +=
        '<option value="' + value.country + '">' + value.country + '</option>';
    });
  });
  // and remove lines block below
  */
  movieData = [
    {
      term: '2020W',
      Year: 2018,
      link: 'https://www.imdb.com/title/tt6342440',
      title: 'Funan',
      country: 'France',
    },
    {
      term: '2020W',
      Year: 2017,
      link: 'https://www.imdb.com/title/tt6516966',
      title: 'And Then They Came for Us',
      country: 'United States',
    },
    {
      term: '2020W',
      Year: 2019,
      link: 'https://www.imdb.com/title/tt6751668',
      title: 'Parasite',
      country: 'South Korea',
    },
  ];
  $.each(movieData, function (index, value) {
    html_code +=
      '<option value="' + value.country + '">' + value.country + '</option>';
  });

  $('#country').append(html_code);
}

function updateDropdown(country, year, title) {
  if (!year) {
    html_code = '<option value="">Select year</option>';
    $.each(movieData, function (index, value) {
      if (value.country == country) {
        html_code +=
          '<option value="' + value.Year + '">' + value.Year + '</option>';
      }
    });
    // update year dropdown
    $('#Year').html(html_code);
    $('#title').html('<option value="">Select movies</option>');
  } else {
    html_code = '<option value="">Select movies</option>';
    $.each(movieData, function (index, value) {
      if (value.country == country) {
        html_code +=
          '<option value="' + value.title + '">' + value.title + '</option>';
      }
    });
    // update year dropdown
    $('#title').html(html_code);
  }
}

$('#country, #Year, #title').on('change', function () {
  if (this.id == 'country') {
    // reset year and title
    $('#Year').prop('selectedIndex', 0);
    $('#title').prop('selectedIndex', 0);
  } 
  
  if (this.id == 'title') {
    console.log('The title is: ' + $(this).val());
  } else {
    var country = $('#country').val();
    var year = $('#Year').val();
    var title = $('#title').val();
    updateDropdown(country, year, title);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div>
    <select name="country" id="country" class="form-control input-lg">
      <option value="">Select country</option>
    </select>
    <br /><br />
    <select name="Year" id="Year" class="form-control input-lg">
      <option value="">Select year</option>
    </select>
    <br /><br />
    <select name="title" id="title" class="form-control input-lg">
      <option value="">Select movies</option>
    </select>
  </div>
</div>

使用 json 的依赖下拉列表

Dependent dropdown using json

html

javascript

jquery

json

dropdown