根据值属性使用键盘选择选项

Question

<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/

Answer 1

从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> 

Answer 2

检查这个我已经修改了ahmad的答案，这也适用于2位数。 资源

 var typingTimer; var doneTypingInterval = 1000; var $input = $('select'); var keys = ''; $input.on('keyup', function (e) { keys += parseInt(e.key); console.log(keys); clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $input.on('keydown', function () { clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { if(keys != ''){ //do something $input.val(parseInt(keys)); keys=''; } } 

 <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> 

Answer 3

据我所知，唯一可靠的方法是使用javacript选择菜单替换插件。 选择时捕获按键的技术主要针对某些浏览器而不是其他浏览器（请参阅此处的更多讨论： 下拉列表中的keydown事件 ）。 事实上，尽管其他人已经提到它适用于他们，但Ahmad上面的回答并不适用于我的浏览器（Chrome 49 / OS X 10.8）。

以下是使用Select2修改匹配器方法的方法示例：

 $('select').select2({ matcher: function(params, data) { if ($.trim(params.term) === '') { return data; } else if (data.id.indexOf(params.term) === 0) { // this is where the magic happens // we return options where search input matches // the beginning of the value return data; } else { return null; } } }); 

 select { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.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>