WordPress小部件页面选择框问题：更新时选中状态丢失排查

Hey Pawel, sorry to hear you're stuck with this annoying state loss issue—let's walk through the most likely culprits and how to fix them:

1. You're not binding the selected state to a persistent data source #

If your selector is just rendering static options without linking the selected value to a saved state (like your widget's stored settings, component state, or backend value), it'll reset every time the widget refreshes.

For example, in a WordPress widget scenario, you need to pull the previously saved value from the widget instance when rendering the dropdown, instead of starting fresh. In frontend frameworks like React/Vue, use a controlled component with the selection bound to state/props, not just relying on the selected attribute on individual options.

2. Widget updates aren't preserving the selected value #

Most widget systems (like WordPress's widget API) reset the component state on update unless you explicitly save and restore the selection.

Here's a quick WordPress widget code example to fix this:

// In your widget's form method
public function form( $instance ) {
    // Grab the saved selection, default to empty if none exists
    $selected_page = isset( $instance['selected_page'] ) ? $instance['selected_page'] : '';
    
    // Render the dropdown with the saved value pre-selected
    wp_dropdown_pages( array(
        'name'     => $this->get_field_name( 'selected_page' ),
        'selected' => $selected_page,
        'show_option_none' => 'Select a page'
    ) );
}

// In the update method, save the selection to the widget instance
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['selected_page'] = sanitize_text_field( $new_instance['selected_page'] );
    return $instance;
}

3. Frontend component re-renders are resetting state #

If this is a single-page app (SPA) widget, your component might be re-rendering (e.g., parent component updates, route changes) and losing the selected value because it's stored in a temporary variable instead of persistent state.

For Vue, use v-model to bind the selection to component data or props:

<template>
  <select v-model="selectedPageId">
    <option 
      v-for="page in availablePages" 
      :key="page.id" 
      :value="page.id"
    >
      {{ page.title }}
    </option>
  </select>
</template>

<script>
export default {
  props: ['availablePages', 'initialSelectedPage'],
  data() {
    return {
      selectedPageId: this.initialSelectedPage // Initialize with saved value
    };
  }
};
</script>

4. Asynchronous option loading is causing timing issues #

If your page options load asynchronously (e.g., via an API call), the widget might finish updating before the options are fetched. This means the selected value can't match any options, so it appears reset.

Fix this by setting the selected value after the options have loaded:

async function loadPagesAndSetSelection() {
  // Fetch pages first
  const response = await fetch('/api/get-site-pages');
  const pages = await response.json();
  
  // Update the options list
  this.availablePages = pages;
  
  // Now set the saved selected value
  this.selectedPageId = this.savedPageId;
}

// Call this on widget mount/update
loadPagesAndSetSelection();

Start by checking if your selection is being saved correctly (step 2 is the most common issue for traditional widgets), then verify the state binding. If you're using async data, check the load order!

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