使用 json 的相关下拉列表

Question

I am currently working on a dynamic dependent dropdown.我目前正在研究动态相关下拉列表。 I want a sidebar with each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection.我想要一个侧边栏，每个下拉列表都取决于它上面的那个，所以你根据你的选择，正确的数据将显示在下一个选择中。 It should be Country -> Years -> Terms -> Movies.它应该是国家 -> 年 -> 条款 -> 电影。 I don't know why my data won't retrieve data from the json file.我不知道为什么我的数据不会从 json 文件中检索数据。 I am new to programming so Any help would be greatly appreciated.我是编程新手，所以任何帮助将不胜感激。

The Json file(moviessimple.js) format is like this: 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"
},

Right now, my HTML file:现在，我的 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

you only need to get the data from server once, save it to global variable then update the dropdown from other function您只需要从服务器获取一次data ，将其保存到全局变量，然后从其他 function 更新下拉列表

 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 的相关下拉列表

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-19 01:12:55

使用 json 的相关下拉列表

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-19 01:12:55

解决方案1
0 已采纳 2021-03-19 01:12:55