使用jquery.remoteChained遍历城市时，编辑页保留选中城镇项

To keep the currently selected town option when switching cities using jquery.remoteChained, you need to capture the selected town ID before the city changes, then re-select it once the new town options are loaded (if it exists in the new city's list). Here's how to implement this:

Step 1: Ensure Your HTML Includes the City Select #

First, make sure you have a city dropdown that triggers the town update (this is assumed in your question):

<!-- City Select -->
<div class="form-group">
  <div class="row">
    <div class="col-4"><label for="city">City</label></div>
    <div class="col-8">
      <select name="city" id="city" class="form-control form-control-sm">
        <!-- Populate city options from your backend -->
        <option value="<?php echo $adresdetay["CityID"];?>" selected><?php echo cityName($adresdetay["CityID"]);?></option>
      </select>
    </div>
  </div>
</div>

<!-- Your Existing Town Select -->
<div class="form-group">
  <div class="row">
    <div class="col-4"><label for="town">Town</label></div>
    <div class="col-8">
      <select name="town" id="town" class="form-control form-control-sm">
        <option value="<?php echo $adresdetay["TownID"];?>" selected><?php echo townName($adresdetay["TownID"]);?></option>
      </select>
    </div>
  </div>
</div>

Step 2: Implement the jQuery Logic #

Use the following JavaScript to capture the selected town and re-select it after the dropdown is updated:

$(document).ready(function() {
  // Store the initial selected town ID when the page loads
  let selectedTownId = $('#town').val();

  // Initialize remoteChained for the town dropdown
  $('#town').remoteChained({
    parents: '#city', // The parent dropdown (city)
    url: '/your/town-data-endpoint.php', // Replace with your actual backend endpoint
    complete: function() {
      // This callback runs after new town options are loaded
      // Check if the stored town ID exists in the new options
      if ($('#town option[value="' + selectedTownId + '"]').length > 0) {
        $('#town').val(selectedTownId); // Re-select the town if it exists
      }
    }
  });

  // Update the stored town ID whenever the user selects a new town
  $('#town').on('change', function() {
    selectedTownId = $(this).val();
  });

  // Capture the current town ID before the city changes (in case the user had selected one)
  $('#city').on('change', function() {
    selectedTownId = $('#town').val();
  });
});

Key Explanations: #

• Storing the Selected Town: We keep track of the currently selected town ID in a variable (selectedTownId) so we can reference it after the dropdown is refreshed.
• Complete Callback: The complete function in remoteChained runs after the new town options are fetched from the server. We check if the stored town ID exists in the new options and select it if it does.
• Updating the Stored ID: We update selectedTownId whenever the user changes the town selection, ensuring it's always up to date. We also capture it when the city changes to preserve the user's last selection before switching cities.
• Backend Endpoint: Your backend endpoint should return HTML options for the selected city (e.g., <option value="1">Town A</option>). Make sure it includes the town that was previously selected if it belongs to the new city.

Notes: #

• If the selected town doesn't belong to the newly selected city, it won't be re-selected (this is expected behavior, as a town can't be part of two cities).
• Ensure your remoteChained plugin version supports the complete callback. If not, you can listen to the ajaxComplete event globally, but the callback approach is cleaner.

内容的提问来源于stack exchange，提问作者Jüpiter Yazılım