<table>

  <td>


      <input type="radio" id="apple_radio" name="fruits" value="apple" checked>
      <label for="apple_radio">apple</label><br>
      <input type="radio" id="banana_radio" name="fruits" value="banana">
      <label for="banana_radio">banana</label><br>

      <hr>
      <label for="fruits">Choose a fruit:</label>

      <br>

      <select id="fruits">
        <option value="apple">apple</option>
        <option value="banana">banana</option>
      </select>

      </td>

  <td class="list">
    <img alt="apple" width="200" src="https://image.shutterstock.com/image-photo/fresh-red-apple-leaf-isolated-260nw-1571353396.jpg" />

    <img alt="banana" width="200" src="https://image.shutterstock.com/image-photo/banana-cluster-isolated-260nw-575528746.jpg" />
  </td>
</table>
body{
  padding: 10px;
}

img, input, label, select{
  cursor: pointer;
}

.active{
  border: 2px solid red;
}
$("img").click(function () {
  //this is change select value 1
  var currentValue = ($(this).attr("alt"));
  /* change select menu */
  $('#fruits').val(currentValue).trigger('change');
  /* change radio button */
  $('input:radio[value="' + currentValue + '"]').prop('checked', true).trigger('change');
});

/* set first radio as active */
$("img:first").addClass("active");

/* change Active State on click/select */
$("img").click(function () {
  $("img").removeClass("active");
  $(this).addClass("active");     
});

/* on select change the active state */
$("#fruits").change(function () {
  var currentValue = $(this).val();
  $("img").removeClass("active");
  $('img[alt="' + currentValue + '"]').addClass("active");
  $('input:radio[value="' + currentValue + '"]').prop('checked', true).trigger('change');
});

/* on radio change the active state */
$("input[type=radio]").change(function () {
  var currentValue = $(this).val();
  $("img").removeClass("active");
  $('img[alt="' + currentValue + '"]').addClass("active");
  $('#fruits').val(currentValue).trigger('change');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js