如何根据两个下拉选择更改图像src属性？

<select id="categorySelect">
  <option value="animals">动物</option>
  <option value="nature">自然</option>
  <option value="food">食物</option>
</select>

<select id="imageSelect">
  <option value="cat">猫</option>
  <option value="dog">狗</option>
  <option value="bird">鸟</option>
</select>

<img id="image" src="" alt="图片">

// 获取下拉选择框元素
var categorySelect = document.getElementById('categorySelect');
var imageSelect = document.getElementById('imageSelect');
var image = document.getElementById('image');

// 添加事件监听器
categorySelect.addEventListener('change', updateImage);
imageSelect.addEventListener('change', updateImage);

// 更新图像src属性的函数
function updateImage() {
  // 获取当前选择的值
  var category = categorySelect.value;
  var imageValue = imageSelect.value;
  
  // 根据选择的值拼接图像路径
  var imagePath = category + '/' + imageValue + '.jpg';
  
  // 更新图像的src属性
  image.src = imagePath;
}