Если вы хотите, чтобы функциональность была при наведении, вам нужно будет указать атрибут size
, который изменит макет выпадающего меню (проверьте код ниже) в поле выбора. В противном случае это невозможно.
Другой вариант - использовать событие change
:
$('#direction1').on('mouseenter', 'option', function(e) {
$("p").text($(this).val());
})
$("#direction2").on('change', function(e) {
$("p").text($(this).val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Value will come here on selecting an option</p>
<select id="direction1" size="4">
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
</select>
<select id="direction2">
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
</select>