javascript - 如何将 Select 值从 Javascript 传递到 PHP 以在更改时生成选择选项

Question

这是我生成位置的代码:

<select name="filter-location" id="location">
    <option value="">
        <?php if ( $input_titles == 'placeholders' ) : ?>
        <?php echo __( 'Location', 'realia' ); ?>
        <?php else: ?>
        <?php echo __( 'All locations', 'realia' ); ?>
        <?php endif; ?>
    </option>
    <?php
        $locations = get_terms('locations', array(
            'hide_empty'    => false,
            'parent'        => 0
        ));
    ?>
    <?php if ( is_array( $locations ) ) : ?>
    <?php foreach ( $locations as $location ) : ?>
    <option value="
        <?php echo esc_attr( $location->term_id ); ?>" 
        <?php if ( ! empty( $_GET['filter-location'] ) && $_GET['filter-location'] == $location->term_id ) : ?>selected="selected"
        <?php endif; ?>>
        <?php echo esc_html( $location->name ); ?>
    </option>
    <?php endforeach; ?>
    <?php endif; ?>
</select>

这是生成区域的代码:

<?php $sublocations = get_terms('locations', array(
                                'hide_empty' => false,
                                'parent' => $location->term_id,
                               ));
?>

如您所见，要生成学区，需要$location->term_id。

每当有人选择位置时，如何发送 $location->term_id？

Answer 1

更改位置选择时，将调用 ajaxDistrictsRequest() 函数，并将所选值作为参数传递。

<select name="filter-location" id="location" onchange="ajaxDistrictsRequest(this.value)">
  <option value="">
<?php
  if ( $input_titles == 'placeholders' ) :
    echo __( 'Location', 'realia' );
  else:
    echo __( 'All locations', 'realia' );
  endif;
?>
  </option>
<?php
  $locations = get_terms('locations', array(
      'hide_empty'    => false,
      'parent'        => 0
  ));
  if ( is_array( $locations ) ) :
    foreach ( $locations as $location ) :
      $selected = ((! empty( $_GET['filter-location'] ) && $_GET['filter-location'] == $location->term_id ) ? "selected" : "";
?>
  <option value="<?php echo esc_attr( $location->term_id ); ?>" 
    <?php echo $selected ?>><?php echo esc_html( $location->name ); ?></option>
<?php
    endforeach;
  endif;
?>
</select>
<select name="filter-sub-location" id="district" disabled>
  <option value="">
</select>

以下代码使用 jQuery 将 AJAX 请求发送到 districts.php，提供的值为 term_id。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script type="text/javascript">
  function ajaxDistrictsRequest(value) {
    if (value) {
      var districtSelect = document.getElementById('district');
      // disable the #district list until it is populated by the response
      districtSelect.disabled = true;
      // make the ajax call to districts.php
      $.ajax({
        url: 'districts.php',
        type: 'POST',
        data: {
          term_id : value
        },
        success: function (response) {
          // populate the #districts option list with the result
          districtSelect.innerHTML = response;
          // enable the #district control
          districtSelect.disabled = false; 
        }
      });
    }
  });
</script>

为了完整起见，这里有一个示例 districts.php 文件，它生成 #district 下拉列表的选项:

<?php
  if ( isset( $_POST['term_id'] ) ) :
    $term_id = $_POST['term_id'];
    // do database query
    $sql = 'SELECT id, name FROM some_table WHERE term_id = :value';
    $stmt = $dbh->prepare($sql); 
    $stmt->execute( array( ':value' => $term_id ) );
    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
    foreach ($results as $row) :
      echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";
    endforeach;
    exit;
  endif;
?>