JQuery .focus() 事件更改 DropDown 选项
我有一个选择列表,它是在网格内使用 jquery 构建的。当用户输入按键时,会构建选择列表,然后我调用 click() 和 focus() ,以便可以再次使用按键命令。
我遇到的问题是 .focus() 在触发时会更改选择列表的选择。有人以前经历过这种行为或找到解决方法吗?提前致谢
function INTEREST_createPaymentTypeDropDown() {
//Interest specific:
//build a dropdown for the enum
//if the PaymentType input exists
if ($("#PaymentType").length > 0) {
var cellPaymentTypeValue = $("#PaymentType").val();
var selectedOption;
$("#PaymentType").replaceWith("<select id='PaymentType' style='width:95px; height: 20px;' name='PaymentType'></select>");
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
var newoption = $("<option value=\"" + val + "\">" + key + "</option>");
if (val == cellPaymentTypeValue || key == cellPaymentTypeValue) {
//append select to the current value
selectedOption = val;
}
$("#PaymentType").append(newoption);
$("#PaymentType").addClass("t-input");
});
if (selectedOption != null) {
$("#PaymentType").val(selectedOption.toString());
}
}
function INTEREST_setEditField(field) {
if ($("#PaymentType").length > 0) {
// this is where the problem is
$("#PaymentType").click();
}
else {
$(".t-grid-content").find('.t-input').click();
$(".t-grid-content").find('.t-input').select();
}
INTEREST_persistPaymentTypeOnCellChange(field);
}
function INTEREST_persistPaymentTypeOnCellChange(field) {
//keep the value of the enum not the enum index
//in the payment type field
var paymentTypeCell = $(field).parent().children().eq(1);
if ($(paymentTypeCell).html().length == 1) {
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
if ($(paymentTypeCell).html() == val) {
$(paymentTypeCell).html(key);
}
});
}
}
$('td.t-grid-edit-cell', 'div#AccountPayments').live('keydown', function(event) {
if (event.which == 39 || event.which == 9) //Tab or right arrow
{
if ($(this).hasClass('t-last')) {
INTEREST_goToNextRow(this, event);
}
else {
INTEREST_goToRight(this, event);
}
}
else if (event.which == 37 || event.which == 9 && event.shiftKey) //left arrow. Todo: add shift tab
{
if ($(this).hasClass('t-first')) {
INTEREST_goToPreviousRow(this, event);
}
else {
INTEREST_goToLeft(this, event);
}
}
else if (event.which == 40) //down arrow
{
INTEREST_goDown(this, event);
}
else if (event.which == 38) //up arrow
{
INTEREST_goUp(this, event);
}
});
$("#PaymentType").live('click', function(event) {
$(this).focus();
});
I have a selectlist with that is built using jquery inside a grid. When a user enters a key the select list is built, I then call click() and focus() so that I can use the key commands again.
The problem that I have is that .focus() is changing the selection of the select list when fired when it is fired. Has anyone experienced this behaviour before or found a workaround? Thanks in advance
function INTEREST_createPaymentTypeDropDown() {
//Interest specific:
//build a dropdown for the enum
//if the PaymentType input exists
if ($("#PaymentType").length > 0) {
var cellPaymentTypeValue = $("#PaymentType").val();
var selectedOption;
$("#PaymentType").replaceWith("<select id='PaymentType' style='width:95px; height: 20px;' name='PaymentType'></select>");
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
var newoption = $("<option value=\"" + val + "\">" + key + "</option>");
if (val == cellPaymentTypeValue || key == cellPaymentTypeValue) {
//append select to the current value
selectedOption = val;
}
$("#PaymentType").append(newoption);
$("#PaymentType").addClass("t-input");
});
if (selectedOption != null) {
$("#PaymentType").val(selectedOption.toString());
}
}
function INTEREST_setEditField(field) {
if ($("#PaymentType").length > 0) {
// this is where the problem is
$("#PaymentType").click();
}
else {
$(".t-grid-content").find('.t-input').click();
$(".t-grid-content").find('.t-input').select();
}
INTEREST_persistPaymentTypeOnCellChange(field);
}
function INTEREST_persistPaymentTypeOnCellChange(field) {
//keep the value of the enum not the enum index
//in the payment type field
var paymentTypeCell = $(field).parent().children().eq(1);
if ($(paymentTypeCell).html().length == 1) {
$.each(INTEREST_PAYMENT_TYPES, function(key, val) {
if ($(paymentTypeCell).html() == val) {
$(paymentTypeCell).html(key);
}
});
}
}
$('td.t-grid-edit-cell', 'div#AccountPayments').live('keydown', function(event) {
if (event.which == 39 || event.which == 9) //Tab or right arrow
{
if ($(this).hasClass('t-last')) {
INTEREST_goToNextRow(this, event);
}
else {
INTEREST_goToRight(this, event);
}
}
else if (event.which == 37 || event.which == 9 && event.shiftKey) //left arrow. Todo: add shift tab
{
if ($(this).hasClass('t-first')) {
INTEREST_goToPreviousRow(this, event);
}
else {
INTEREST_goToLeft(this, event);
}
}
else if (event.which == 40) //down arrow
{
INTEREST_goDown(this, event);
}
else if (event.which == 38) //up arrow
{
INTEREST_goUp(this, event);
}
});
$("#PaymentType").live('click', function(event) {
$(this).focus();
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是否列表顶部没有空选项,因此当调用
click()
时,会导致PaymentType
自动选择第 0 个选项?Could it be that there's no empty option at the top of the list so that when the
click()
is called it's causingPaymentType
to auto-select the 0th option?