如何在函数上使用 JavaScript 的 JSON 文件两次

how use JSON file using javascript on a function twice

本文关键字：文件 JSON 两次 JavaScript 函数      更新时间：2023-09-26

我正在尝试创建一个可以加载的网页，它从.js文件创建数据并填充到下拉列表中。

当用户选择数据时，它会将输出带入输出字段。我怎么可能这样做？请帮忙

Js 文件在这里"http://www.w3schools.com/json/myTutorials.js"

<!DOCTYPE html>
<html>
<body>
<select id="id01" onchange="getURL()"></select >
<p id="output"></p>
<script>
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<option>' + arr[i].url + '</option>';
    }
    document.getElementById("id01").innerHTML = out;
}
function getURL(){
myFunction();
//the display and url should be placed on output field <p>
}
</script>
<script src="myTutorials.js"></script>
</body>
</html>

请阅读代码和注释，如果不清楚，请告诉我。

// from the file
var arr = [
  {
    "display": "HTML Tutorial",
    "url": "http://www.w3schools.com/html/default.asp"
  },
  {
    "display": "CSS Tutorial",
    "url": "http://www.w3schools.com/css/default.asp"
  },
  {
    "display": "JavaScript Tutorial",
    "url": "http://www.w3schools.com/js/default.asp"
  },
  {
    "display": "jQuery Tutorial",
    "url": "http://www.w3schools.com/jquery/default.asp"
  },
  {
    "display": "JSON Tutorial",
    "url": "http://www.w3schools.com/json/default.asp"
  },
  {
    "display": "AJAX Tutorial",
    "url": "http://www.w3schools.com/ajax/default.asp"
  },
  {
    "display": "SQL Tutorial",
    "url": "http://www.w3schools.com/sql/default.asp"
  },
  {
    "display": "PHP Tutorial",
    "url": "http://www.w3schools.com/php/default.asp"
  },
  {
    "display": "XML Tutorial",
    "url": "http://www.w3schools.com/xml/default.asp"
  }
];
function myFunction(arr) {
  var out = "";
  var i;
  out += '<option>Pick a website</option>';
  for(i = 0; i<arr.length; i++) {
    /* set the value as the URL, and the text as the display property to thow clean text for the user
    and functionality text to the browser.*/
    out += '<option value="' + arr[i].url + '">' + arr[i].display + '</option>';
  }
  document.getElementById("id01").innerHTML = out;
}
// when user pick an option (onchange), show the select's value in the #output
function getURL(select)  {
  document.getElementById('output').innerHTML = select.value;
}
// call the fill function on body ready
myFunction(arr);
<select id="id01" onchange="getURL(this)"></select>
<p id="output"></p>

更新

在下面的示例中，我们使用 http://www.w3schools.com/json/myTutorials.js 脚本来填充数据

注意：您必须了解这是一个非常具体的方案。在现实世界中，您不会获得这样的文件（调用特定函数）。在大多数情况下，您需要使用ajax从外部资源获取数据，这是完全不同的事情。阅读更多关于 ajax 和 ajax with jQuery。

<script>
  function myFunction(arr) {
    var out = "";
    var i;
    out += '<option>Pick a website</option>';
    for(i = 0; i<arr.length; i++) {
      /* set the value as the URL, and the text as the display property to thow clean text for the user
    and functionality text to the browser.*/
      out += '<option value="' + arr[i].url + '">' + arr[i].display + '</option>';
    }
    document.getElementById("id01").innerHTML = out;
  }
  // when user pick an option (onchange), show the select's value in the #output
  function getURL(select)  {
    document.getElementById('output').innerHTML = select.value;
  }
</script>
<select id="id01" onchange="getURL(this)"></select>
<p id="output"></p>
<script src="http://www.w3schools.com/json/myTutorials.js"></script>

相关文章：