gpt4 book ai didi

javascript - 根据下拉点击更改javascript中的数据源?

转载 作者:行者123 更新时间:2023-12-03 02:40:24 25 4
gpt4 key购买 nike

我有一个如下所示的 HTML 页面。它包括一个下拉列表和一个用于显示 map 的 div:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Month<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">11-01-2017</a></li>
<li><a href="#">12-01-2017</a></li>
</ul>
</div>
<div>
<div id="MapDiv" ></div>
</div>
</div>

MapDiv 使用以下 javascript 函数填充。它是一个返回 json 流的 WCF。它被硬编码为11-01-2017:

var portsMap = AmCharts.makeChart( "MapDiv", {
"type": "map",
"theme": "light",
"colorSteps": 5,
"dataLoader": {
"url": "http://OurServer/Service1.svc/GetInfo/11-01-2017"
...(OTHER CODE)...
} );

我的问题是:如何更改 dataloader 以便它根据我的下拉选择进行加载?因此,如果我选择12-01-2017,那么显示的数据将来自日期。

谢谢。

最佳答案

我会在下拉列表中添加一个监听器(您应该将其更改为使用带有选项的选择标签。在更改时,我会在 map 对象中设置 url,然后在 dataLoader 对象上调用 .loadData() 来更新它。

你的“下拉菜单”而不是使用 <ul>应该看起来像

<select id="myDropDown" class="dropdown-menu">
<option value="11-01-2017">11-01-2017</option>
<option value="12-01-2017">12-01-2017</option>
</select>

还有 JavaScript

document.getElementById("myDropDown").onchange=setMapURL;

function setMapURL(event) {
var newDate= event.target.value;
portsMap.dataLoader.url = "http://OurServer/Service1.svc/GetInfo/" + newDate;
portsMap.dataLoader.loadData()
}

还有一个很好的example在 amcharts 网站上

关于javascript - 根据下拉点击更改javascript中的数据源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48346142/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com