将选择下拉列表转换为<ul>列表，并突出显示所选类别

<select id="category-select">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

<ul id="category-list">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
</ul>

const selectElement = document.getElementById('category-select');
const listItems = document.getElementById('category-list').getElementsByTagName('li');

selectElement.addEventListener('change', function() {
  const selectedCategory = selectElement.value;

  // 移除所有列表项的突出显示样式
  for (let i = 0; i < listItems.length; i++) {
    listItems[i].classList.remove('highlight');
  }

  // 根据所选类别添加突出显示样式
  for (let i = 0; i < listItems.length; i++) {
    if (listItems[i].textContent === selectedCategory) {
      listItems[i].classList.add('highlight');
    }
  }
});

.highlight {
  background-color: yellow;
  font-weight: bold;
}