首页 > 解决方案 > 根据值属性使用键盘选择选项

问题描述

<select>
 <option value="1">Jan</option>
 <option value="2">Feb</option>
 <option value="3">Mar</option>
 <option value="4">Apr</option>
 <option value="5">May</option>
 <option value="6">Jun</option>
 <option value="7">Jul</option>
 <option value="8">Aug</option>
 <option value="9">Sept</option>
 <option value="10">Oct</option>
 <option value="11">Nov</option>
 <option value="12">Dec</option>
</select>

我有月份的列表,它们有代表月份的数值。我需要在聚焦时通过在键盘上键入 3 来选择 Mar。

现在我必须输入“m”来选择 Mar 或任何月份的第一个字母来选择那个月份。

你可以看看这里的小提琴:https ://jsfiddle.net/tn0gL34h/1/

标签: javascriptjqueryhtml

解决方案


从 1 月到 9 月的几个月,下面的代码都可以工作,因为它们都需要一个按键。

对于其他月份,第 10 个月、第 11 个月和第 12 个月,您必须手动选择。

$('select').on('keyup',function(e){
  // this will only work for Jan --> Sep
  // becuase Oct --> Dec require two digits
  
  $(this).val(parseInt(e.key));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select>
 <option value="1">Jan</option>
 <option value="2">Feb</option>
 <option value="3">Mar</option>
 <option value="4">Apr</option>
 <option value="5">May</option>
 <option value="6">Jun</option>
 <option value="7">Jul</option>
 <option value="8">Aug</option>
 <option value="9">Sept</option>
 <option value="10">Oct</option>
 <option value="11">Nov</option>
 <option value="12">Dec</option>
</select>


推荐阅读