专注于所选选项

Question

我想听有关选项的内容。这是我的代码

<p></p>
<select id="direction">
   <option value="North">North</option>
   <option value="South">South</option>
   <option value="East">East</option>
   <option value="West">West</option>
</select>

$("#direction option").focus(e=>{
    $("p").text($(this).val());
}

Answer 1

如果需要悬停功能，则需要指定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>