HTML-CSS实现下拉选项差异化背景色及选中状态持久化需求

Got it, let's build this out step by step—this solution will handle custom colored dropdown options, save your selection, and restore it when you come back to the page. Here's everything you need:

1. HTML Structure #

We'll use a <select> with options that carry their color info via a data-color attribute, plus a container to display the selected item with its matching color:

<!-- The dropdown menu -->
<select id="customSelect">
  <option value="" disabled selected>Select an option</option>
  <option value="2020" data-color="#ff6b6b">2020</option>
  <option value="2021" data-color="#4ecdc4">2021</option>
  <option value="2022" data-color="#45b7d1">2022</option>
  <option value="2023" data-color="#96ceb4">2023</option>
</select>

<!-- Container to show the selected item with its color -->
<div id="selectedItemDisplay" class="selected-container">
  <!-- Content will be populated by JavaScript -->
</div>

2. CSS Styling #

Style the dropdown options to have unique backgrounds, and make the selected display look clean and visible:

/* Style individual dropdown options */
#customSelect option {
  padding: 8px 12px;
}

#customSelect option[data-color="#ff6b6b"] {
  background-color: #ff6b6b;
}

#customSelect option[data-color="#4ecdc4"] {
  background-color: #4ecdc4;
}

#customSelect option[data-color="#45b7d1"] {
  background-color: #45b7d1;
}

#customSelect option[data-color="#96ceb4"] {
  background-color: #96ceb4;
}

/* Style the selected item display container */
.selected-container {
  margin-top: 15px;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  display: none; /* Hidden until an option is selected */
}

3. JavaScript Logic #

This handles saving your selection to localStorage, updating the display, and restoring the state when the page loads:

const customSelect = document.getElementById('customSelect');
const selectedDisplay = document.getElementById('selectedItemDisplay');

// Update the selected item display with text and color
function updateDisplay(value, color, text) {
  selectedDisplay.textContent = text;
  selectedDisplay.style.backgroundColor = color;
  selectedDisplay.style.display = 'block';
}

// Save selection data to localStorage
function saveSelection(value, color, text) {
  localStorage.setItem('savedSelection', JSON.stringify({
    value: value,
    color: color,
    text: text
  }));
}

// Handle dropdown change event
customSelect.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const value = selectedOption.value;
  const color = selectedOption.dataset.color;
  const text = selectedOption.textContent;

  if (value) {
    updateDisplay(value, color, text);
    saveSelection(value, color, text);
  } else {
    // Reset display and clear saved data if default option is selected
    selectedDisplay.style.display = 'none';
    localStorage.removeItem('savedSelection');
  }
});

// Restore saved selection when page loads
document.addEventListener('DOMContentLoaded', function() {
  const savedData = localStorage.getItem('savedSelection');
  if (savedData) {
    const { value, color, text } = JSON.parse(savedData);
    // Set dropdown to the saved value
    customSelect.value = value;
    // Update the display container
    updateDisplay(value, color, text);
  }
});

How It All Works: #

• Each <option> uses a data-color attribute to store its unique background color, making it easy to access in JavaScript.
• When you select an option, we grab its value, color, and text, update the display container, and save this data to localStorage so it persists across page reloads.
• When the page loads, we check localStorage for a saved selection. If found, we set the dropdown to the saved value and populate the display container with the correct text and color.
• The default "Select an option" is disabled so users can't select it, but the code still handles resetting the display if needed.

Just tweak the option values and data-color hex codes to match your specific needs!

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