Question

我有一个组合框，我选择一个选项填充表'distrito'，其中列是'ID'和'nome'。

到目前为止，这么好。问题是当我想根据第一个组合框中的选项选项填充其他组合框时。填充此组合框的表'localidade'使用列'id'，'nome'和'id_distrito'。

这是填充第一个名为'distrito'的组合框的代码：

<?php

// Connects to your Database 
 include "config.php";

 $QUERY_LISTAR_DISTRITO = "SELECT id, nome FROM distrito";

 $DISTRITO = mysql_query($QUERY_LISTAR_DISTRITO) or die(mysql_error());
 $nr_distrito = mysql_num_rows($DISTRITO);

 while ($nr_distrito > 0) {
    $row = mysql_fetch_row($DISTRITO);

    echo '<option value="'.$row[0].'">'.$row[1].'</option>';
    $nr_distrito--;
 }
?>

这是填充第二个组合框的代码，名为'localidade'：

    <?php   
// Connects to your Database 
 include "config.php";

 $id_distrito = $_GET['distrito'];

 $QUERY_LISTAR_LOCALIDADE = "SELECT * FROM localidade WHERE localidade.id_distrito = $id_distrito";

 $LOCALIDADE = mysql_query($QUERY_LISTAR_LOCALIDADE) or die(mysql_error());
 $nr_localidade = mysql_num_rows($LOCALIDADE);

 while ($nr_localidade > 0) {
    $row = mysql_fetch_row($LOCALIDADE);

    echo '<option value="'.$row[0].'">'.$row[1].'</option>';
    $nr_localidade--;
 }
 ?>

这是HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<form action="registarGestorBD.php" method="post" enctype="multipart/form-data">
Distrito: <select name="distrito" id="distrito">
                <?php include 'listarDistritos.php'; ?>
            </select> <br> <br>
Localidade: <select name="localidade" id="localidade">
                <?php include 'listarLocalidades.php'; ?>
            </select> <br> <br>
<input  type="submit" name="button1" id="button1" value="Guardar">
</form>
</body>
</html>

提前致谢。：）

Answer 1

你需要的基本上是一个ajax调用，它将在选择第一个组合框时触发。 ajax调用将发送第一个组合框的值，并将根据id查询另一个表。

这可能会对你有所帮助

Combobox items based on selected item in another combobox

Answer 2

这将解决您的问题。将您的HTML文件更改为此

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Test</title>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head>
<body>
   <form action="registarGestorBD.php" method="post" enctype="multipart/form-data">
       Distrito: <select name="distrito" id="distrito">
            <?php include 'listarDistritos.php'; ?>
        </select> <br> <br>
       Localidade: <select name="localidade" id="localidade">

        </select> <br> <br>
       <input  type="submit" name="button1" id="button1" value="Guardar">
   </form>
  <script type="text/javascript">
       $(document).on('change','#distrito',function(){
             var val = $(this).val();
             $.ajax({
                   url: 'listarLocalidades.php',
                   data: {distrito:val},
                   type: 'GET',
                   dataType: 'html',
                   success: function(result){
                        $('#localidade').html();  
                        $('#localidade').html(result); 
                   }
              });
       });
  </script>
</body>
</html>

Answer 3

你需要关注ajax。考虑这个例子（从Wikipedia修改）：

    function sendToServer(){

      // Initialize the Ajax request
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'send-ajax-data.php');

      // Track the state changes of the request
      xhr.onreadystatechange = function(){
          // Ready state 4 means the request is done
          if(xhr.readyState === 4){
              // 200 is a successful return
              if(xhr.status === 200){
                  var options = xhr.responseText.split(",");
                  populateComboBox(options)

              }
          }
      }

      // Send the request to send-ajax-data.php
      xhr.send(distrito_id);
        }

    function populateComboBox(options){
        var combo = document.getElementById("localidade");
        $(options).each(function(i){
            var opt = options[i];
            var el = document.createElement("option");
            el.textContext = opt;
            el.value = opt;
            combo.appendChild(el);

        })
    }

然后当然在你的php中，获取post变量distrito_id，执行查询并以逗号分隔的列表返回结果！

PHP：使用MySQL数据库从另一个组合框中选择一个选项后填充组合框

3 个答案: