根據值屬性使用鍵盤選擇選項

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>