JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<ul class="drop">
<li>
    <a href=""> Options</a>
    <ul class="dropdown">
        <select id="bar" data-answer="">
            <option value="bar1">bar1</option>
            <option value="bar2">bar2</option>
        </select>
    </ul>
    <span id="foo"></span>
</li>
</ul>

CSS

.dropdown{
    width:100px;
    height:20px;
    color:white;
    border:1px solid red;
    padding:10px;
    display:none;
}
a{
    text-decoration:none;
    color:red;
    padding:10px;
    display:inline-block;
    border:1px solid red;
    border-radius:10px;
}
ul{
    list-style:none;
}
.drop li:hover .dropdown{
    display:block;
}

JavaScript

$('#bar').on('change', function(){
  var $t =$(this) , value=$t.val();
  $t.data('answer', value);
});

setInterval(function(){
 $('#foo').text($('#bar').data('answer'));
},1000);