Question

您好，开发人员社区。我需要您的帮助。我正在建立一个考勤管理项目。在这个项目中，我被困在一个功能上。我要显示的是根据部门输入显示部门，而无需进入下一页。

<div class="form-group">
   <label for="block" class="control-label col-sm-2">Select block:</label>
       <div class="col-xs-10">
          <select class="form-control" name="block" id="block">
             <option selected="selected" value="">Select Block:</option>
                <?php 
                      $q="select * from blocks ORDER BY block_name";
                      $res=mysqli_query($con,$q);
                      while($row=mysqli_fetch_array($res)){
                         echo "<option value='$row[block_id]'class='form-control'>".$row['block_name']."</option>";
                      }
                ?>
              </select>
        </div>
</div>
<div class="form-group">
   <label for="department" class="control-label col-sm-2">Select department:</label>
       <div class="col-xs-10">
          <select class="form-control" name="department" id="department">
                <option selected="selected" value="">Select Department:</option> 

                      <?php 
                          $q="select * from departments ORDER BY department_name";
                          $res=mysqli_query($con,$q);
                          while($row=mysqli_fetch_array($res)){
                               echo "<option  value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
                          }
                     ?>
          </select>
   </div>

Answer 1

我认为最好的方法是使用Ajax。但是，如果您还不了解Ajax，那么您的想法是重新加载当前页面，并在其中附加带有Block值的查询字符串，然后基于块值显示Department。

因此，要获取块值并重新加载，可以使用jQuery以简单的方式。代码是这样的。

“阻止”选择选项（为选择器添加类）：

<select class="block-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

JavaScript / jQuery：

$(document).ready(function() {
    $('.block-select').change(function() {
    var val = $(this).val();
    var curUrl = window.location.href;
    // Append the value to current URL & reload
    var targetUrl = curUrl + '?block=' + val;
    window.location.href = targetUrl;
  });
});

然后将“部门选择”选项更改为这样：

<select class="form-control" name="department" id="department">
    <?php 
    $where = !empty($_GET['block']) ? "block='$_GET[block]'" : '1=1';
    $q="select * from departments ORDER BY department_name WHERE $where";
    $res=mysqli_query($con,$q);
    while($row=mysqli_fetch_array($res)){
        echo "<option  value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
    }
    ?>
</select>

上面的代码将从URL中检查块的值，如果块不为空，则我们将按块值获取部门数据，否则全部获取。

Answer 2

创建一个PHP文件，例如dep-getter.php

<?php
// Include your connection config
include 'db-config.php';

// getting block value
$block = $_GET['block'];

$where = !empty($_GET['block']) ? "block='$block'" : '1=1';
$q="select * from departments ORDER BY department_name WHERE $where";
$res=mysqli_query($con,$q);
while($row=mysqli_fetch_array($res)){
    echo "<option  value='$row[department_id]'class='form-control'>".$row['department_name']."</option>";
}
?>

JavaScript / jQuery：

$(document).ready(function() {
  $('.block-select').change(function() {
    var val = $(this).val();
    $.ajax({
      url: '/path/to/dep-getter.php?block='+val,
      method: 'GET',
      success: function(data) {
        $('.select-department').html(data);
      },
      error: function() {
        console.log('Something went wrong!');
      }
    });
  });
});

为了简单理解，我使用before代码。有关详细说明，您可以阅读Ajax文档。

注意： 您需要向名称为select-department的Department select选项添加类作为放置Ajax结果的目标。

希望这对您有所帮助。

根据先前的选择框在选择框中显示内容

2 个答案: