JQuery .focus() 事件更改 DropDown 选项

发布于 2024-10-30 13:06:35 字数 3081 浏览 1 评论 0原文

我有一个选择列表,它是在网格内使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

甩你一脸翔 2024-11-06 13:06:35

是否列表顶部没有空选项,因此当调用 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 causing PaymentType to auto-select the 0th option?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文