javascript - Change Graph in the div using Drop Down List. -

here html code generate drop-down list -

<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>  

here js based on selected value -

<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 saturday";     break;   case "/abc.php/?daterange=1y":    alert("f");     break;   } }); </script> 

then have high chart graph code render graph given inputs in div -

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

here want achieve when value in drop down list selected/changed should display concerned graph in same div. example, here case d = "/abc.php/?daterange=1d" should show hello in same div using render graph.

how can achieve ? please guide.

perhaps use iframe achieve this?

in html:

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

and javascript:

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

i've assumed option values have relative urls, contain graph output you're looking for. based on assumption, thought best have iframe render output, , change source when updating graph.

because change of drop-down means different url, change source attribute (src) of iframe each time dropdown changed. because of this, you'll notice lack of "hello" in example, should apparent iframe's source changes when change drop-down value.