javascript – 添加选择下拉框以点击交换图像js

我有一个javascript,当你点击图像时它会改变图像scr,它将循环通过.它还有箭头键盘导航的分页链接.我想要做的是添加一个选择下拉列表框,允许我跳转到我想要的任何图像.我怎样才能做到这一点？我只想要一个没有提交按钮的选择下拉列表

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child').attr('source');
	$('.picture').attr({'src' : leadOff,'imageposition' : '1'});
});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe,#buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
	var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')').attr('source');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child').attr('source');
    $('.picture').attr({'src' : leadOff,'imageposition' : '1'});
  } else {
    $('.picture').attr({'src' : nextUp,'imageposition' : plusOne});
  }
});
/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
	var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')').attr('source');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child').attr('source');
    $('.picture').attr({'src' : lastPic,'imageposition' : imageTally});
  } else {
    $('.picture').attr({'src' : nextUp,'imageposition' : minusOne});
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url)
  {
    window.location = url;
  }
Mousetrap.bind("right",function() {
document.getElementById('buttonright').click();
  });
  
  function GoToLocation(url)
  {
    window.location = url;
  }
Mousetrap.bind("left",function() {
document.getElementById('buttonleft').click();
  });

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;

  flex-direction: column;
  padding: 6px;
  background-color: hsla(0,0%,20%,1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0,40%,1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#buttonleft,#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40,70%,1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana,sans-serif;
  background-color: hsla(0,1);
  cursor: pointer;
}
#buttonleft:hover,#buttonright:hover {
  background-color: hsla(50,50%,1);
}
#shoebox {
  display: none;
}