如何使用Javascript通过Select元素更改卡片标题颜色，而不影响其他卡片？

<div id="card1" class="card">
  <h2 class="card-title">Card 1</h2>
  <p class="card-content">Card 1 content</p>
</div>

<div id="card2" class="card">
  <h2 class="card-title">Card 2</h2>
  <p class="card-content">Card 2 content</p>
</div>

<!-- 其他卡片... -->

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card-title {
  color: #000;
}

/* 其他样式... */

// 获取Select元素
var selectElement = document.getElementById("color-select");

// 添加change事件处理程序
selectElement.addEventListener("change", function() {
  // 获取选中的颜色值
  var selectedColor = this.value;

  // 获取所有卡片元素
  var cardElements = document.getElementsByClassName("card");

  // 遍历卡片元素并更改标题颜色
  for (var i = 0; i < cardElements.length; i++) {
    var cardTitleElement = cardElements[i].getElementsByClassName("card-title")[0];
    cardTitleElement.style.color = selectedColor;
  }
});

<select id="color-select">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <!-- 其他选项... -->
</select>