根据前一个选择框在选择框中显示内容

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

创建一个 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!');
      }
    });
  });
});

为了简单理解，我使用前面的代码。详细解释可以阅读 Ajax 文档。

注意： 您需要将类添加到名称为select-department 的部门选择选项中作为放置ajax 结果的目标。

希望对您有所帮助。

Answer 2

我认为最好的方法是使用 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中检查block值，如果block不为空则通过block值获取部门数据，否则全部获取。