如何在PHP中实现动态省市区下拉框？需存储名称而非ID

Hey there! Let's sort out this issue where you're only saving the IDs of states, districts, and areas to your database instead of their actual names. I'll walk you through the steps with code snippets to make this work smoothly:

Right now, your dropdowns are probably only passing the selected ID via the value attribute. We need to add hidden input fields to store the corresponding names, and use JavaScript to populate those fields when a user makes a selection.

Example HTML Adjustments: #

<!-- State Dropdown + Hidden Input for Name -->
<select name="state_id" id="state">
  <option value="">Select State</option>
  <!-- Options loaded dynamically via JS -->
</select>
<input type="hidden" name="state_name" id="state_name">

<!-- District Dropdown + Hidden Input for Name -->
<select name="district_id" id="district" disabled>
  <option value="">Select District</option>
</select>
<input type="hidden" name="district_name" id="district_name">

<!-- Area Dropdown + Hidden Input for Name -->
<select name="area_id" id="area" disabled>
  <option value="">Select Area</option>
</select>
<input type="hidden" name="area_name" id="area_name">

JavaScript to Populate Hidden Fields: #

Add event listeners to each dropdown to capture the selected name and store it in the corresponding hidden input:

// State selection handler
document.getElementById('state').addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  document.getElementById('state_name').value = selectedOption.textContent.trim();
  
  // Existing code to load districts (enable dropdown and fetch data)
  loadDistricts(this.value);
});

// District selection handler
document.getElementById('district').addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  document.getElementById('district_name').value = selectedOption.textContent.trim();
  
  // Existing code to load areas
  loadAreas(this.value);
});

// Area selection handler
document.getElementById('area').addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  document.getElementById('area_name').value = selectedOption.textContent.trim();
});

Your get_district.php and get_area.php should return both the ID and name for each option, so the frontend can display the name and capture it later. Here's how to adjust those files:

Example for get_district.php: #

<?php
// Assuming you're using PDO for database connections (adjust if using mysqli)
$pdo = new PDO('mysql:host=your_host;dbname=your_db', 'user', 'pass');

$state_id = $_GET['state_id'];
// Fetch both district_id and district_name
$query = "SELECT district_id, district_name FROM districts WHERE state_id = ?";
$stmt = $pdo->prepare($query);
$stmt->execute([$state_id]);
$districts = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($districts);
?>

Update the JS Function to Load Districts (and Areas): #

Make sure when you dynamically create options, you set the value to the ID and the textContent to the name:

function loadDistricts(stateId) {
  const districtSelect = document.getElementById('district');
  districtSelect.disabled = false;
  districtSelect.innerHTML = '<option value="">Select District</option>';

  fetch(`get_district.php?state_id=${stateId}`)
    .then(res => res.json())
    .then(data => {
      data.forEach(district => {
        const option = document.createElement('option');
        option.value = district.district_id;
        option.textContent = district.district_name;
        districtSelect.appendChild(option);
      });
    });
}

// Repeat similar logic for loadAreas() using get_area.php

Now, when the form is submitted, you'll have access to both the IDs and names in the $_POST array. Update your insert query to include the name fields:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Retrieve both IDs and names from the form submission
  $state_id = $_POST['state_id'];
  $state_name = $_POST['state_name'];
  $district_id = $_POST['district_id'];
  $district_name = $_POST['district_name'];
  $area_id = $_POST['area_id'];
  $area_name = $_POST['area_name'];

  // Validate inputs (always do this!)
  if (empty($state_name) || empty($district_name) || empty($area_name)) {
    die('Please select a complete state, district, and area.');
  }

  // Insert into your database table (adjust table/column names to match yours)
  $query = "INSERT INTO location_data (state_id, state_name, district_id, district_name, area_id, area_name)
            VALUES (?, ?, ?, ?, ?, ?)";
  $stmt = $pdo->prepare($query);
  $stmt->execute([$state_id, $state_name, $district_id, $district_name, $area_id, $area_name]);

  // Redirect or show success message
  header('Location: success.php');
  exit;
}
?>

To prevent empty or invalid submissions, add a frontend check before the form is sent:

document.getElementById('your-form-id').addEventListener('submit', function(e) {
  const stateName = document.getElementById('state_name').value;
  const districtName = document.getElementById('district_name').value;
  const areaName = document.getElementById('area_name').value;

  if (!stateName || !districtName || !areaName) {
    e.preventDefault();
    alert('Please select a valid state, district, and area.');
  }
});

内容的提问来源于stack exchange，提问作者D. Rudra