如何将SELECT和RADIO结合使用以显示数据

<select id="colorSelect">
  <option value="red">红色</option>
  <option value="blue">蓝色</option>
  <option value="green">绿色</option>
</select>

<input type="radio" name="animal" value="cat">猫
<input type="radio" name="animal" value="dog">狗
<input type="radio" name="animal" value="bird">鸟

function displayData() {
  var color = document.getElementById("colorSelect").value;
  var animal = document.querySelector('input[name="animal"]:checked').value;

  // 根据选择的颜色和动物显示相应的数据
  if (color === "red" && animal === "cat") {
    console.log("选择了红色和猫");
    // 显示红色和猫的数据
  } else if (color === "blue" && animal === "dog") {
    console.log("选择了蓝色和狗");
    // 显示蓝色和狗的数据
  } else if (color === "green" && animal === "bird") {
    console.log("选择了绿色和鸟");
    // 显示绿色和鸟的数据
  }
}

// 监听SELECT元素和RADIO元素的变化
document.getElementById("colorSelect").addEventListener("change", displayData);
document.querySelectorAll('input[name="animal"]').forEach(function(radio) {
  radio.addEventListener("change", displayData);
});