JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ville">
    <li data-value="-1">Selectionnez une ville...</li>
    <li data-valeur="Par">Paris</li>
    <li data-valeur="Bor">Bordeaux</li>
    <li data-valeur="Lyo">Lyon</li>
    <li data-valeur="Bre">Brest</li>
    <li data-valeur="Tou">Toulouse</li>
    <li data-valeur="Met">Metz</li>
</ul>
<input type="hidden" value="-1" id="selville" />
<input type="button" id="result" value="selection" />

CSS

ul { border: solid 1px silver;
     display: inline-block;}
.selected {background-color: green;}
.first {{background-color: none !important;}

JavaScript

$('#ville li:gt(0)').css('display','none')
$('#ville li:gt(0)').click(function(){
    tab=new Array();
    $(this).toggleClass('selected');
    $('.selected').each(function(){
        tab.push($(this).data('valeur'))    
    })
    if(tab.length==0){
       $('#selville').val(-1)

    }
    $('#selville').val(tab.join(','))
                               })
$('#ville').mouseenter(function(){
    $(this).find('li:gt(0)').slideDown('slow');
})
.mouseleave(function(){
    $(this).stop(true,true).find('li:gt(0)').not('.selected').slideUp('fast');
})

$('#result').click(function(){alert($('#selville').val())})