Javascript 使用下拉列表更改div中的图形。

以下是生成下拉列表的html代码-

<form method="post" action="abc.php">
 <select name="dateRange" id="mySelect" size="1" onchange="window.location=this.options[this.selectedIndex].value">
       <option value > Select Duration </option>
       <option value="/abc.php/?dateRange=1d">Last 24 Hours</option>
       <option value="/abc.php/?dateRange=2d">Last 2 Days</option>
       <option value="/abc.php/?dateRange=1w">Last Week</option>
       <option value="/abc.php/?dateRange=2w">Last 2 Weeks</option>
       <option value="/abc.php/?dateRange=1m">Last Month</option>
       <option value="/abc.php/?dateRange=3m">Last 3 Months</option>
       <option value="/abc.php/?dateRange=6m">Last 6 Months</option>
       <option value="/abc.php/?dateRange=1y">Last Year</option>
</select> 

<script type="text/javascript">
$('#mySelect').on('change', function () {
  var d = $('#mySelect').val();
  switch (d)
  {
  case "/abc.php/?dateRange=1d":
document.write("<?php echo 'hello!'; ?>");
    break;
  case "/abc.php/?dateRange=2d":
    alert("a");
    break;
  case "/abc.php/?dateRange=1w":
   alert("b");
    break;
  case "/abc.php/?dateRange=2w":
    alert("c");
    break;
  case "/abc.php/?dateRange=1m":
    alert("d");
    break;
  case "/abc.php/?dateRange=3m":
    alert("d");
    break;
  case "/abc.php/?dateRange=6m":
    x="Today is Saturday";
    break;
  case "/abc.php/?dateRange=1y":
   alert("f");
    break;
  }
});
</script>

选择持续时间
过去24小时
最后2天
上周
最后两周
上个月
过去3个月
过去6个月
去年

下面是js根据所选值执行的操作-

<form method="post" action="abc.php">
 <select name="dateRange" id="mySelect" size="1" onchange="window.location=this.options[this.selectedIndex].value">
       <option value > Select Duration </option>
       <option value="/abc.php/?dateRange=1d">Last 24 Hours</option>
       <option value="/abc.php/?dateRange=2d">Last 2 Days</option>
       <option value="/abc.php/?dateRange=1w">Last Week</option>
       <option value="/abc.php/?dateRange=2w">Last 2 Weeks</option>
       <option value="/abc.php/?dateRange=1m">Last Month</option>
       <option value="/abc.php/?dateRange=3m">Last 3 Months</option>
       <option value="/abc.php/?dateRange=6m">Last 6 Months</option>
       <option value="/abc.php/?dateRange=1y">Last Year</option>
</select> 

<script type="text/javascript">
$('#mySelect').on('change', function () {
  var d = $('#mySelect').val();
  switch (d)
  {
  case "/abc.php/?dateRange=1d":
document.write("<?php echo 'hello!'; ?>");
    break;
  case "/abc.php/?dateRange=2d":
    alert("a");
    break;
  case "/abc.php/?dateRange=1w":
   alert("b");
    break;
  case "/abc.php/?dateRange=2w":
    alert("c");
    break;
  case "/abc.php/?dateRange=1m":
    alert("d");
    break;
  case "/abc.php/?dateRange=3m":
    alert("d");
    break;
  case "/abc.php/?dateRange=6m":
    x="Today is Saturday";
    break;
  case "/abc.php/?dateRange=1y":
   alert("f");
    break;
  }
});
</script>

$（'#mySelect'）。on（'change'，function（）{
var d=$（'#mySelect'）.val（）；
开关（d）
{
案例“/abc.php/？dateRange=1d”：
文件。填写（“”）；
打破
案例“/abc.php/？dateRange=2d”：
警报（“a”）；
打破
案例“/abc.php/？dateRange=1w”：
警报（“b”）；
打破
案例“/abc.php/？dateRange=2w”：
警报（“c”）；
打破
案例“/abc.php/？dateRange=1m”：
警报（“d”）；
打破
案例“/abc.php/？dateRange=3m”：
警报（“d”）；
打破
案例“/abc.php/？dateRange=6m”：
x=“今天是星期六”；
打破
案例“/abc.php/？dateRange=1y”：
警报（“f”）；
打破
}
});

然后我有一些高级图表代码，用于为div中的给定输入呈现图表-

   <div id="container" style="min-width: 4000px; height: 2000px; margin:0px  "> </div>
   <button id="zoom">Zoom </button>

快速移动

这里我想要实现的是，当下拉列表中的值被选中/更改时，它应该在同一个div中显示相关的图形。 例如，对于

d=“/abc.php/？dateRange=1d”

的情况，它应该在我用来渲染图形的同一个div中显示hello

我怎样才能做到这一点？

---

请指导。

或许可以使用iframe来实现这一点

在HTML中：

<div><iframe style="min-width: 4000px; height: 2000px; margin:0px" id="graph" src="about:blank" /></div>
<form method="post" action="abc.php">
<!-- snip -->

然后是您的JavaScript：

<script type="text/javascript">
    var graphContainer = document.getElementById("graph");
    $('#mySelect').on('change', function () {
        var d = $('#mySelect').val();
        graphContainer.src = d;
    });
</script>

var graphContainer=document.getElementById（“图形”）；
$（'#mySelect'）。on（'change'，function（）{
var d=$（'#mySelect'）.val（）；
graphContainer.src=d；
});

我假设您拥有的选项值是相对URL，它将包含您正在寻找的图形输出。基于这个假设，我认为最好使用iframe呈现这个输出，并在更新图形时简单地更改源代码

---

因为下拉列表的更改意味着不同的URL，所以每次更改下拉列表时，我只需更改iframe的源属性（src）。因此，您会注意到在我的示例中缺少“hello”，因为很明显，当您更改下拉值时，iframe的源会发生更改。

您可以将highcharts div包装在父级中，如：

<div id="test">
   <span id="tit"></span>
   <div id="container" style="min-width: 4000px; height: 2000px; margin:0px  "> </div>
   <button id="zoom">Zoom </button>
</div>

快速移动

然后将文本加载到span，但将图表加载到容器