Изменение выпадающего изображения со ссылкой с кнопкой отправки

Question

Я хочу, чтобы изображение изменялось в зависимости от выпадающего списка, а затем направлялось на URL-адрес, также связанный с параметром при отправке.

Итак, для каждого параметра есть два «значения»: изображение и URL. Изображение мгновенно меняется, и URL-адрес - это то место, куда направляется выбор при отправке.

У меня работало изменение изображения, затем был добавлен скрипт для ссылки и ссылка, которая не работала.

<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
    <option value="https://pbs.twimg.com/profile_images/650647649985646593/FEed4zzM_400x400.jpg" selected="" href="detroitcanvas.co">Choice 1</option>
    <option value="https://news.artnet.com/app/news-upload/2020/01/Jackie-Saccoccio-256x256.png" href="twitter.com">Choice 2</option>
    <option value="https://art-media.s3.amazonaws.com/media/public/tags/tag_animal%20art/2019-11-20T194138.3524830000.thumb.jpeg" href="instagram.com">Choice 3</option>
    </select>
    <br><br>
    <img id="imageToSwap" class="profile" src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg">
    <a href="javascript: submitform()">Submit</a>

<script>document.getElementById('my_selection').onchange = function() {
    window.location.href = this.children[this.selectedIndex].getAttribute('href');}</script>

Answer 1

Вы можете использовать атрибуты данных в каждом параметре для дополнительных значений и ввести свои JS, чтобы использовать их, например, , этот псевдокод:

<option data-src="https://pbs.twimg.com/profile_images/650647649985646593/FEed4zzM_400x400.jpg" selected="" value="detroitcanvas.co">Choice 1</option>

<script>
document.getElementById('my_selection').onchange = function() {
image.src = this.children[this.selectedIndex].dataset.src;}

onsubmit uses the selected option value 
</script>