Javascript 如何在手机中基于下拉菜单显示某些照片？

在我的工作中，（我只是一名学生工作者，没什么专业），我的老板想让我想出一种在我们的网站上展示照片的方法。这里有一个陷阱：

我的问题是：

有没有更好的办法？我把事情复杂化了吗？ （我考虑过使用后端数据库来存储URL，这样就可以很容易地从下拉菜单选项中添加/删除URL，但事实证明这很难解决）

如果这是一个好方法，我如何让它在手机上工作

 $(function() {

  // WHEN THE BUILDING CHANGES
  $('#buildings').on('change', function() {

    // set val equal to BUILDING VALUE
    var val = $(this).val();
    // set room = ROOMS
    var room = $('#room');

    // if it's the BSB, show the wings - else hide them.
    if (val == "BSB") {
      $('#wings').show();

      // Change the room numbers based on selected Wing
      $('#wings').on('change', function() {
        val = $(this).val();

        room.find('option').not(':first').hide();
        $('option', room).filter(function() {
          if ($(this).attr('data-group') == val) {
            $(this).show();
          }
        });
        room.val(0);
      });
      $('#wings').trigger('change');

      // must not be the BSB
    } else {
      $('#wings').hide();

      // select room based on Building
      room.find('option').not(':first').hide();
      $('option', room).filter(function() {
        if ($(this).attr('data-group') == val) {
          $(this).show();
        }
      });
      room.val(0);
    }

  });
  $('#buildings').trigger('change');
});

function setImage(select){
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
}


function resetImage(){
    var image = document.getElementsByName("image-swap")[0];
  image.src = "";
}