Сделайте форму выбора, используя изображения

Question

Я работаю над своим сайтом и хочу, чтобы пользователь мог выбрать ответ на формуляр, нажав на изображение, представляющее категорию. Например, щелчок по мячу равен <option value="sport">Sport<option>

Итак, можно ли выбрать вариант из формул, нажав на изображение, вместо обычного списка выбора?

Inte rnet - это полно решений, показывающих, как добавить мини-картинку рядом с опцией из списка, но это не то, что я ищу.

Если вопрос повторяется, или есть решение в inte rnet, я был бы признателен за ссылку

Answer 1

Все лучше объясняется с помощью телепузиков.

$( document ).ready(function() {
  $('#images img').click(function() {
    $('#teletubbies').val($(this).attr('id'));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="teletubbies" name="teletubbies">
  <option value="yellow">Laa-Laa</option>
  <option value="green">Dipsy</option>
  <option value="purple">Tinky Winky</option>
</select> 
<div id="images">
 <img id="yellow" src="https://apprecs.org/ios/images/app-icons/256/ba/1071811770.jpg" />
 <img id="green" src="https://is3-ssl.mzstatic.com/image/thumb/Purple30/v4/99/95/68/999568bc-1ae5-1b73-5a17-b15edb3d0106/source/256x256bb.jpg" />
 <img id="purple" src="https://is2-ssl.mzstatic.com/image/thumb/Purple18/v4/17/7f/c7/177fc7b6-62ed-6132-7641-ada29f5d5f7e/source/256x256bb.jpg" />
</div>