JSFiddle - React, Tailwind, and code Playground

HTML

<select id="foo">
    <option value='choisissez' selected="selected" >choisissez</option>
    <option value='yellow'>jaune</option>
    <option value='blue'>bleu</option>
    <option value='green'>vert</option>
    <option value='pink'>rose</option>
</select>
    
<div id="screen">    
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="pink"></div>
</div>

CSS

#screen > div {height: 100px; 
 display:none;}

#yellow { background-color: yellow ;}
#blue { background-color: blue;}
#green { background-color: green;}
#pink { background-color: pink ;}

li {cursor: pointer;}

JavaScript

$(function(){
    $ul=$('<ul/>').attr('id','ulfoo')
    $('#foo option').each(function(){
    $ul.append ( $('<li/>').data('valeur',$(this).attr('value')).text($(this).text()) )
        
    })
    $('#foo').hide().after($ul)
    
    
    $('#ulfoo li').on('click', function(){
        $('#foo').val( $(this).data('valeur') ).trigger('change');
    })
    
       $('#foo').on('change', function(){
       $('#screen > div').hide();
       $('#'+ $(this).val()).slideDown();
        
        
    })
    
    
  })