如何根据不同的下拉选择更改下拉值

Question

我在 php 页面中有一个 servlet 加载 这是我的 php 页面：reviewing.php

if(isset($_GET['x'])){
    $x = $_GET['x'];
}else{
    $x = '';
}

$site = $_SERVER['SERVER_NAME'];

if(isset($_GET['id'])){
    $Id = "id=".$_GET['id'];
}else{
    $Id = "";
}

$handle = fopen("http://".$site.":8080/Apps/reviewing.php?$Id", "r"); 

$contents = '';

while (!feof($handle)) {

 $contents .= fread($handle, 8192);

}

fclose($handle);

echo $contents;

如您所见，我的 php 页面加载了一个 servlet。 servlet 是该过程发生的地方。它还包括 servlet 中的 JSP 和 html 页面。

当另一个下拉菜单的选项已更改时，我需要能够更改下拉菜单的值。它们都是单独的 mysql 查询，但只有在下拉列表更改时我才需要运行第二个查询。我这样做的原因是我可以在 dropdown2 查询中使用 dropdown1 的值作为 WHERE。

我尝试了类似的东西

  function reload(form)
  {

      var ID = form.agent.options[form.agent.options.selectedIndex].value;

      return ID;
  } 

这个函数进入<select onchange="reload(this.form);"> 那么我想使用 ID 来运行下一个查询

<select>
//javascript
if(isset(reload())){
   //JAVA
   run query here WHERE id = ID;

    while(rs.next()){
      outn.print("<option>" + rs.getString("value") + "</option>");
    }
}
</select>

这就是我的设想。另一种选择是在 reload() 函数中使用它

self.location='http://exmaple.com/reviewing.php?x=blah&ID=blah;

但我不想继续重新加载页面。那是低效的。

Answer 1

好的，那么你应该像下面这样编写你的程序：

1. 处理选择元素 onchange 事件

   • 在选择元素 onchange-attribut 中（就像你做的那样）
   • 带 JS
   • 使用 jQuery

2. 在这个处理程序中你可以得到选中的索引

3. 用它来获取id
4. 向 php 文件发送 ajax 请求以从数据库中获取数据，id 为 POST 数据
5. 用db的数据发回RESPONSE（可能你应该使用json）
6. 使用回复填写您的选择

这是一个小代码示例：

HTML

<select id='select1'>
    <option id='option_1' value='1'>Option 1</option>
    <option id='option_2' value='2'>Option 2</option>
    <option id='option_3' value='3'>Option 3</option>
    <option id='option_4' value='4'>Option 4</option>
</select>

<select id='select2'>

</select>

JS

document.getElementById('select1').onchange = function(){
    var xmlhttp=new XMLHttpRequest();
    var params = "id="+this.value           //you can add more data, use & as delemitter

    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            fillSelect(xmlhttp.responseText);
        }
    }

    xmlhttp.open("POST","path/to/php.php",true);
    xmlhttp.send(params);
}

var fillSelect = function(response){
    //Here you can go through all elements from response 
    //and build new options and append them to Select2
}

PHP

if (!isset($_POST('id')) die("Submission failed!");

$id = $_POST('id');

$mysqli = new mysqli(HOST, USER, PW, DB);   //assuming you have these static variables, change it for your settings

//use $id now to create the query
$query = "[...]";

$result = $mysqli->query($query);

echo json_encode($result);

JSFIDDLE for parts of the code

我希望 php 不包含错误。我无法测试它。如果有问题，只需检查拼写是否正确等等......