<select> событие изменения не запускается при использовании клавиатуры
http://jsfiddle.net/rFEER/
<select id="users">
<option value="1">jack</option>
<option value="2">brill</option>
<option value="3">antony</option>
</select>
JS:
$("#users").change(function(){
alert($(this).val());
})
почему изменение события не запускается при использовании (keyup/keydown) до щелчка мыши.
Ответы
Ответ 1
почему изменение события не запускается при использовании (keyup/keydown) до щелчка мыши.
Он также срабатывает, когда фокус выходит из select. Вот как работает change.
Если вы хотите проактивное уведомление, вам нужно следить за change и keydown (по крайней мере, вы можете захотеть click) и обработать случай получения события, когда значение фактически не изменилось, и, вам придется обработать тот факт, что некоторые из этих событий (keydown, например) увольняются до изменения значения, поэтому вам нужно подождать момента перед обработкой события. Или посмотрите ответ SpYk3HH, который использует keyup вместо — это будет менее инициативным (не обновляясь до момента выпуска ключа, что может быть желательным), но тогда вам не нужна задержка (setTimeout) моего кода ниже.
Пример (живая копия):
HTML (я взял на себя смелость изменить значения, чтобы было ясно, что было с каждым именем):
<select id="users">
<option value="j">jack</option>
<option value="b">brill</option>
<option value="a">antony</option>
</select>
JavaScript:
$("#users").bind("keydown change", function(){
var box = $(this);
setTimeout(function() {
display(box.val());
}, 0);
});
Примечание в 2016 году: bind в значительной степени было заменено на on. В вышесказанном вы буквально просто замените "bind" на "on".
Ответ 2
Попробуйте изменить
$("#users").change(function(){
к
$("#users").bind('change keyup', function(e) {
который должен связывать функцию yyour как для события onchange, так и при нажатии клавиши со стрелкой вниз или вверх
Заметьте, вы также можете использовать keydown, но он может не преформироваться так, как ожидалось, так как ваш код будет работать до того, как будет выполнено изменение выбора.
И если вы хотите окно с прокруткой для прокрутки, у меня есть отличная небольшая функциональность, я написал, что до сих пор для меня, по крайней мере, отлично работает и может быть назначено все самостоятельно, не затрагивая другие действия с клавиатурой, конечно, и с намерением на наш взгляд, это - работа по работе с клавиатурой, и поэтому вам все равно придется нажимать клавишу со стрелкой снова и снова, но она будет продолжать цикл без остановок через все параметры. Хотя, я уверен, что он будет работать и с keydown, но мы не используем его таким образом, поэтому я его не тестировал. Опять же, keydown, может не выполняться так, как предполагалось, особенно если у выбора есть только 2 или 3 варианта.
function selectInfinateScroll() {
if ($(this).data("lastSelected")) {
if ($(this).data("lastSelected")[0] == $(this).children("option:selected")[0]) {
if ($(this).children("option:selected").index() == 0) {
$(this).children("option:selected").prop("selected", false);
$(this).children("option:last-child").prop("selected", true).change();
}
else {
$(this).children("option:selected").prop("selected", false);
$(this).children("option:first-child").prop("selected", true).change();
};
};
};
$(this).data("lastSelected", $(this).children("option:selected"));
}
$(function() {
// Enable 'Scrolling Through' on Select Boxes
$("select").keyup(selectInfinateScroll);
});
ОБНОВЛЕНО!
Я оставляю исходный ответ, поскольку он использует альтернативный метод, который может быть более полезным для некоторых. Тем не менее, у меня появилась и более короткая функция, которая работает на "keydown" и плагине jQuery, используя указанную функцию, которая позволяет пользователю "удерживать" и стрелку и все равно сортировать параметры бесконечно!
Во-первых, новая функция
function keydownInfiniteSelect(e) {
var eKey = e.which || e.key,
selected = $(this).find("option:selected");
if (eKey == 38 && selected.is(":first-child")) { // up arro
$(this).find("option").last().prop("selected", true); // set value to last option
$(this).change(); // ensure select triggers change do to return false
return false; // keeps select from skipping to second last option
}
else if (eKey == 40 && selected.is(":last-child")) { // down arro
$(this).val($(this).find("option").first().val()); // set value to first option
$(this).change(); // ensure select triggers change
return false; // keeps select from skipping to second option
}
}
Используйте как: $("select").keydown(keydownInfiniteSelect);
И стиль плагина jQuery!
(function($){$.infiniteSelect||($.extend({infiniteSelect:function(b){return b.each(function(){$(this).data("infiniteSelect")||($.fn.on?$(this).on("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0):$(this).bind("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0))})}}),$.fn.extend({infiniteSelect:function(){return $.infiniteSelect($(this))}}),$.infiniteSelect.methods={keydownInfiniteSelect:function(b){b=b.which||b.key;var c=$(this).find("option:selected");
if(38==b&&c.is(":first-child"))return $(this).find("option").last().prop("selected",!0),$(this).change(),!1;if(40==b&&c.is(":last-child"))return $(this).val($(this).find("option").first().val()),$(this).change(),!1}})})(jQuery);
Использовать как $("select").infiniteSelect() ИЛИ $.infiniteSelect("select")
PS. У меня почти есть готовый для Vanilla JavaScript JavaScript, за исключением того, что часть метода "set to last option" продолжает умирать или идет нулевым или переходит ко второму к последнему. Я просто не могу заставить его правильно установить. Если кто-то захочет исправлять и обновлять, я был бы очень обязан. См. ЗДЕСЬ
Ответ 3
Это нормальное поведение...
Указание спецификаций w3c
изменить
Событие изменения происходит, когда элемент управления теряет фокус ввода, и его значение было изменено с момента получения фокуса. Это событие действует для INPUT, SELECT и TEXTAREA. элемент.
Ответ 4
Используя вышеприведенные ответы, я смог получить нужное мне поведение:
$( "select" ).bind('keyup', function(e) {
$( '#' + e.target.id ).trigger('change');
});
Ответ 5
$("#users").bind('change keyup', function(e) {
было достаточно
Ответ 6
/*After having been searching for hours i wrote my own. */
<script>
jQuery(document).ready(function () {
/*********** SELECT PLZ ****************/
/*********** SELECT PLZ ****************/
/*********** SELECT PLZ ****************/
jQuery('.dropedZip').html('' +
'<select name="theName" id="theID" size="4" style="width: 184px" >' +
'<option value="A">Choice A</option>' +
'<option value="B">Choice B</option>' +
'<option value="C">Choice C</option>' +
'<option value="D">Choice D</option>' +
'</select>');
var nextOptValue = 0;
var prevOptValue = 0;
jQuery('#prop').keydown(function (e) {
var key = e.which;
if(key==13){
var currOptValue = jQuery('select#theID > option:selected').val();// CURRENT
alert('ausgesucht: '+currOptValue);
}
/* UP */
if(key==38){
var currOptValue = jQuery('select#theID > option:selected').val();// CURRENT
if(currOptValue!=undefined){// CURRENT != undefined ?
prevOptValue = jQuery('select#theID > option:selected').prev('option').val();// PREV
if(prevOptValue!=undefined){// PREV != undefined ?
jQuery('select#theID > option:selected').removeAttr('selected');// REMOVE CURRENT
jQuery('select#theID > option[value='+prevOptValue+']').prop('selected',true);// SET PREV
jQuery('input#prop').val(prevOptValue);// SET INPUT VALUE : OTHER
}
}
}
/* DOWN */
if(key==40){
if(jQuery('select#theID > option:selected').val()==undefined){// NULL
nextOptValue = jQuery('select#theID > option:first').val();// FIRST
jQuery('select#theID > option[value='+nextOptValue+']').prop('selected',true);// SET FIRST
jQuery('input#prop').val(nextOptValue);// SET INPUT VALUE : FIRST
}else{
nextOptValue = jQuery('select#theID > option:selected').next('option').val();// NEXT
jQuery('select#theID > option:selected').removeAttr('selected');// REMOVE FIRST
jQuery('select#theID > option[value='+nextOptValue+']').prop('selected',true);// SET NEXT
jQuery('input#prop').val(nextOptValue);// SET INPUT VALUE : OTHER
}
}
});
/*********** SELECT PLZ ****************/
/*********** SELECT PLZ ****************/
/*********** SELECT PLZ ****************/
});
</script>
<input id="prop" type="text">
<div class="dropedZip"></div>
