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').siblings('li').removeClass('selected', true);
    $('.selected').each(function () {
        tab.push($(this).data('valeur'))
    })
    $('#selville').val( ($('.selected').length == 0)?"-1": $('.selected:eq(0)').data('valeur') )
     
})

$('#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())
})