Question

我有一个带有两个下拉菜单的HTML表单。第一个下拉列表是使用PHP从数据库中预先填充的，第二个下拉列表是与第一个下拉列表相关联的，并使用AJAX根据第一个中的选择更新值。

如何从下拉菜单中选择内容后更改网址？例如。从第一个下拉列表中选择内容后，网址将类似http://myurl.com/form.php/option1，并在第二个选择http://myurl.com/form.php/option1+option2之后。

我的代码：

脚本：

<script>
  function kuvaRingkond(str) {
    if (str == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
    }
    else {

      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      }
      else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
      }
        xmlhttp.open("GET","getringkond.php?q="+str,true);
      xmlhttp.send();
    }
  }
</script>

  function AjaxFunction()
  {
    var httpxml;
    try
    {
      // Firefox, Opera 8.0+, Safari
      httpxml=new XMLHttpRequest();
    }
    catch (e)
    {
      // Internet Explorer
      try
      {
        httpxml=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
        try
        {
          httpxml=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
          alert("Teie brauser ei toeta Ajaxit!");
          return false;
        }
      }
    }
    function stateck() 
    {
      if(httpxml.readyState==4)
      {

        var myarray = JSON.parse(httpxml.responseText);
        // Remove the options from 2nd dropdown list 
        for(j=document.form.kandidaat.options.length-1;j>=0;j--)
        {
          document.form.kandidaat.remove(j);
        }

        var optn = document.createElement("OPTION");
        optn.text = 'Vali kandidaat';
        optn.value = '0';
        document.form.kandidaat.options.add(optn);

        for (i=0;i<myarray.data.length;i++)
        {
          var optn = document.createElement("OPTION");
          optn.text = myarray.data[i].Eesnimi + ' ' + myarray.data[i].Perekonnanimi;
          optn.value = myarray.data[i].KandidaadiID;
          document.form   .kandidaat.options.add(optn);

        }

      }
    }
  // end of function stateck
  var url="dd.php";
  var erakond_id=document.getElementById('s1').value;
  url=url+"?erakond_id="+erakond_id;
  url=url+"&sid="+Math.random();
  httpxml.onreadystatechange=stateck;
  //alert(url);
  httpxml.open("GET",url,true);
  httpxml.send(null);
}

  </script>

形式：

  <form role="form" name="form" method="POST" action="haaletamine_form.php">

     <div class="form-group">
       <label for="erakond">
         Erakond:
       </label>
       <?php
require "connection_pdo.php";// connection to database 
echo "<select class ='form-control' name=erakond id='s1' onchange=AjaxFunction();>";
echo "<option selecter='selected'>Vali erakond</option>"; 
$sql="select * from erakonnad "; // Query to collect data from table 
foreach ($dbo->
query($sql) as $row) {
echo "<option value=$row[ErakonnaID]>$row[ErakonnaNimi]</option>";
}
echo "</select>";
?>
      </div>

      <div class="form-group">
        <label for="kandidaat">
          Kandidaat:
        </label>
        <select class="form-control" name=kandidaat id='s2' onchange="kuvaRingkond(this.value)">
          <option selecter="selected">
            Vali kandidaat
          </option>
        </select>
      </div>

      <div id="txtHint">
        <b>
        </b>
      </div>

      <button type="submit" class="btn btn-default">
        Kinnita valik
      </button>
   </form>

谢谢！

Answer 1

我就是这样做的。

HTML

<select id="select-list">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
</select>

的jQuery

$(document).ready(function() {
    $('#select-list').on('change', function() {

        var nSelectOption = $('#select-list').find(':selected').text();

        switch(nSelectOption) {
            case "Option One":
            window.location.href = 'http://google.com';
            break;
            case "Option Two":
            window.location.href = 'http://google.com';
            break;
            case "Option Three":
            window.location.href = 'http://google.com';
            break;
        }
    });    
});

从下拉菜单中选择值后更改URL

1 个答案: