根据下拉列表更改本地URL

时间:2013-07-22 12:48:21

标签: javascript url drop-down-menu

我想从

更改本地网址(在同一页面上)
  

使用example.php

  

使用example.php?月=年 - 月

我有以下脚本:

<script type=\"text/javascript\">
  function select() {
    var url = window.location.href;
    var year = document.getElementById('myyear').value;
    var month = document.getElementById('mymonth').value;
    document.my_months.action = url + '?month=' + year + '-' + month;
  }
</script>

以下形式:

echo "<form id =\"my_months\" name= \"my_months\" method=\"post\" onsubmit=\"return select();\">
  <select name = \"myyear\" id = \"myyear\">";

  foreach (range(2012, date('Y')) as $years) {
    if ($years == date('Y')) {
      echo "<option value= \"".$years."\" selected= \"".$years."\">".$years."</option>";
    } else {
      echo "<option value= \"".$years."\">".$years."</option>";
    }
  }
  echo "</select>
        <select name = \"mymonth\"> id = \"mymonth\"";

  foreach ($myMonths as $id => $months) {
    if ($months == date('F')) {
      echo "<option value= \"".$id."\" selected= \"".$id."\">".$months."</option>";
    } else {
      echo "<option value= \"".$id."\">".$months."</option>";
    }
  }
  echo "</select>
  <input type=\"submit\" id=\"Submit_m\" name=\"Submit_m\" value=\"Ok\">
</form>";

但它不起作用。页面将在不修改URL的情况下重新加载! 我在这里做错了什么?

以下是代码:

echo "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\" dir=\"ltr\">
<head>
  <title>title</title>
  <meta name=\"description\" content=\"\" />
  <meta name=\"robots\" content=\"index,follow\" />
  <meta name=\"keywords\" content=\"\" />
  <!--<meta http-equiv=\"refresh\" content=\"5\">-->
  <script type=\"text/javascript\" language=\"javascript\" src=\"../js/jquery-1.9.1.js\"></script>
    <script type=\"text/javascript\" language=\"javascript\" src=\"../js/modules/exporting.js\"></script>
  <script type=\"text/javascript\">
    function select() {
      var url = window.location.href;
      var year = document.getElementById('myyear').value;
      var month = document.getElementById('mymonth').value;
      document.my_months.action = url + '?month=' + year + '-' + month;
    }
  </script>
  <script type=\"text/javascript\">
    $(document).ready(
      function () {
        chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            zoomType: 'xy'
          },
...
        });
      }
    )
  </script>
</head>
<body>";

//here some data and arrays

echo "<form id =\"my_months\" name= \"my_months\" method=\"post\" onsubmit=\"return select();\">
  <select name = \"myyear\" id = \"myyear\">";

  foreach (range(2012, date('Y')) as $years) {
    if ($years == date('Y')) {
      echo "<option value= \"".$years."\" selected= \"".$years."\">".$years."</option>";
    } else {
      echo "<option value= \"".$years."\">".$years."</option>";
    }
  }
  echo "</select>
        <select name = \"mymonth\"> id = \"mymonth\"";

  foreach ($myMonths as $id => $months) {
    if ($months == date('F')) {
      echo "<option value= \"".$id."\" selected= \"".$id."\">".$months."</option>";
    } else {
      echo "<option value= \"".$id."\">".$months."</option>";
    }
  }
  echo "</select>
  <input type=\"submit\" id=\"Submit_m\" name=\"Submit_m\" value=\"Ok\">
</form>
<p><div id=\"container\" style=\"min-width: 200px; height: 400px; margin: 0 auto\"></div></p></body></html>";

2 个答案:

答案 0 :(得分:0)

<script type=\"text/javascript\">
  function select() {
    var url = window.location.href;
    var year = document.getElementById('myyear').value;
    var month = document.getElementById('mymonth').value;
    url += '?month=' + year + '-' + month;

    // set the url in your location bar
    history.pushState({date:"true"}, "", url);
  }
</script>

答案 1 :(得分:0)

所有建议的尝试都没有成功。但是,我已将方法方法从发布更改为获取,并将网址更改为

  

使用example.php myyear = myyear_value&安培; mymonth = mymonth_value&安培; Submit_m = OK

whwn提交名为 Submit_m

的按钮

通过这些变量,我现在已经通过 $ _ GET ['myyear'] $ _ GET ['mymonth']

获取值

现在我得到了预期的行为