JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <input type="radio" value="green"  id="green"  name="panier" checked> vert
    <input type="radio" value="yellow" id="yellow"  name="panier"> jaune
    <input type="radio" value="red"  id="red"  name="panier"> rouge
        
    <select name=fruit>
    <option class=green>Raisin</option>
    <option class=green>Pastèque</option>
    <option class="red green yellow">Pommes</option>
    <option class="red">Cerise</option>
    <option class="red">Fraise</option>
    <option class="green yellow">Banane</option>
    <option class=yellow>Citrons</option>
    </select>

JavaScript

var fruit = $("[name=fruit] option").detach();
setSelectValues('red');

$("[name=panier]").change(function() {
  var val = $(this).attr('id');
  setSelectValues(val);
})

function setSelectValues(val) {
  console.log(val);
  $("[name=fruit] option").detach();
  fruit.filter("." + val).clone().appendTo("[name=fruit]");
}