Django编辑模块中如何将数据库获取的值设置为下拉框默认选中值？

Hey there! Let's fix those dropdowns so they show your saved database values as the default selection. Since you already have the data pulled and other fields are working, we just need to adjust how the dropdown options are rendered and marked as selected. Here's what to do:

First, Fix Your Dropdown Rendering #

Right now, your HTML only has a single "Select" option for each dropdown. You need to loop through all available options (countries/states/cities from your database) to populate the dropdowns, then mark the matching saved value as selected.

Example for Server-Side Template Rendering (using your {{}} syntax)

Assuming you have a list of all countries, states, and cities from your database passed to your template (e.g., allCountries, allStates, allCities), update your HTML like this:

<label>Country</label>
<select id="countryId">
  <option value="">Select Country</option>
  <!-- Loop through all countries from your DB -->
  {{#each allCountries}}
    <option 
      value="{{this.value}}" 
      {{#if (eq this.value vr.country)}}selected{{/if}}
    >
      {{this.name}}
    </option>
  {{/each}}
</select>

<label>State</label>
<select id="stateId">
  <option value="">Select State</option>
  {{#each allStates}}
    <option 
      value="{{this.value}}" 
      {{#if (eq this.value vr.state)}}selected{{/if}}
    >
      {{this.name}}
    </option>
  {{/each}}
</select>

<label>City</label>
<select id="cityId">
  <option value="">Select City</option>
  {{#each allCities}}
    <option 
      value="{{this.value}}" 
      {{#if (eq this.value vr.city)}}selected{{/if}}
    >
      {{this.name}}
    </option>
  {{/each}}
</select>

• Replace this.value with the actual value field from your database records (e.g., country ID or name).
• The {{#if (eq this.value vr.country)}}selected{{/if}} line checks if the option's value matches your saved vr.country value—if yes, it adds the selected attribute to mark it as the default.

If You're Using Frontend JavaScript to Set Values #

If you're populating dropdowns via AJAX or client-side logic after the page loads, use this code to set the default selection once you have your saved data:

// Assume your saved data is stored in the `vr` variable
const setDefaultDropdown = (selectId, savedValue) => {
  const selectElement = document.getElementById(selectId);
  const matchingOption = Array.from(selectElement.options).find(opt => opt.value === savedValue);
  if (matchingOption) {
    matchingOption.selected = true;
  }
};

// Set defaults for each dropdown
setDefaultDropdown('countryId', vr.country);
setDefaultDropdown('stateId', vr.state);
setDefaultDropdown('cityId', vr.city);

Critical Notes to Check #

1. Value Matching: Make sure vr.country, vr.state, and vr.city exactly match the value attribute of their corresponding dropdown options (check for case sensitivity, whitespace, or formatting differences).
2. Dependent Dropdowns: If states load only after a country is selected, you'll need to first set the country dropdown, then trigger the state load, then set the state dropdown (repeat for cities). For example:

   // Set country first
   setDefaultDropdown('countryId', vr.country);
   // Load states based on selected country, then set state
   loadStatesForCountry(vr.country).then(() => {
     setDefaultDropdown('stateId', vr.state);
     // Load cities based on selected state, then set city
     loadCitiesForState(vr.state).then(() => {
       setDefaultDropdown('cityId', vr.city);
     });
   });
   

内容的提问来源于stack exchange，提问作者Iron Man