为什么选择元素中没有填充 json 数据？答案

【问题标题】：Why isnt json data populating in select element?为什么选择元素中没有填充 json 数据？
【发布时间】：2019-07-18 13:53:15
【问题描述】：

我正在使用 json 数据创建一个下拉菜单。为什么没有任何数据填充？我也尝试在 url arg 中直接输入“fitmentData.json”，但对我没有任何作用。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
  scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
crossorigin="anonymous"></script>
</head>

<body>
  <select name="year" id="year">

  </select>

</body>

<script>
  let dropdown = $('year');

  dropdown.empty();

  dropdown.append('<option selected = "true" disabled>Choose 
Year</option>');
  dropdown.prop('selectedIndex', 0);

  const url = 'fitmentData.json';

  $.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
      dropdown.append($('<option></option>').attr('value', 
entry.year).text(entry.year));
    })
  });

</script>

</html>

fitmentData.json

[
  {
    "brand": "Yamaha",
    "model": "YZ100",
    "year": "1981"
  },
  {
    "brand": "Suzuki",
    "model": "RM100",
    "year": "1978"
  },
  {
    "brand": "Yamaha",
    "model": "WR250F",
    "year": "2011"
  },
  {
    "brand": "Suzuki",
    "model": "PE175",
    "year": "1978"
   }
 ]

是的，我已经确定 jquery 是第一个工作的。

【问题讨论】：

标签： jquery html drop-down-menu

【解决方案1】：

你的选择器应该是#year 而不是year。

let dropdown = $('#year');

  dropdown.empty();

  dropdown.append('<option selected = "true" disabled>Choose Year</option>');
  dropdown.prop('selectedIndex', 0);

  const url = 'fitmentData.json';

  let data = [
  {
    "brand": "Yamaha",
    "model": "YZ100",
    "year": "1981"
  },
  {
    "brand": "Suzuki",
    "model": "RM100",
    "year": "1978"
  },
  {
    "brand": "Yamaha",
    "model": "WR250F",
    "year": "2011"
  },
  {
    "brand": "Suzuki",
    "model": "PE175",
    "year": "1978"
   }
 ]
    $.each(data, function (key, entry) {
      dropdown.append($('<option></option>').attr('value', 
entry.year).text(entry.year));
    })

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

  </select>

【讨论】：

现在显示选择年份，但 json 数据仍然没有填充。
你的预期输出是什么？

【解决方案2】：

我找到了答案。我正在使用谷歌浏览器并收到此错误 jquery.min.js:2 从源“null”访问“file:///Users/macbookuser/Desktop/json_dropdown_filter/fitmentData.json”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案: http, data, chrome, chrome-extension, https.

我切换到 Firefox 和 json 数据填充就好了。

【讨论】：