Question

我最近从leafletjs.com下载了一个等值区域地图。我遇到的问题是我有多个标记为年份的js文件（即us-states2012.js，us-states2013.js），我需要创建一个下拉菜单，以便根据列表中的选择（2012， 2013年等）正确的js文件生效。

我是一个完整的新手，我不知道如何创建适当的列表函数，更不用说如何调用每个变量。

我应该将每个javascript文件放入一个并按名称/年（var）排序吗？我应该将每个文件分开并从下拉菜单中调用每个javascript吗？这有可能吗？

Answer 1

如果我正确地理解你，我认为这应该有所帮助：

<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
$("#select" ).on('change', function() { 
  var year = $(this).val();
  var fileName = "us-states"+year+".js";
  var script = document.createElement('script');
  script.src = fileName;
  $("#head").append(script);
  console.log(script);
  })
});
</script>
</head>
<body>
<select id="select">
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
  <option value="2011">2011</option>
</select>
</body>
</html>

这是创建一个HTML下拉列表，可以选择多年。然后，一旦做出选择，它就会通过从下拉菜单中插入年份来动态生成具有正确源名称的脚本。

你必须弄乱fileName变量才能让它准确输出你的源URL。

让我知道这是否有帮助，或者我误解了你在寻找什么。

同时查看this Stack Overflow post动态创建脚本（我从acrosman的回答中借了几行）。

使用下拉菜单更改变量（或javascript）

1 个答案: