1

在执行 JQuery 触发器“更改”事件以获取保存的选定值之前，我不知道如何手动更新组合框的选定值。无论我做什么，更改事件中保存的选定值都是空白的。

我正在使用在网页加载期间传递给 javascript 的数据库中保存的值，完成后是让 javascript 重新进行组合框选择（并在之后触发更多组合框 [在这种情况下，Make、Model &修剪]）。

有没有办法使这项工作？因为我只手动选择了一次，所以应该与用户通过鼠标单击手动选择组合框的方式相同。谢谢。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            function AnimationBegin3() {
                var $deferred = $.Deferred();

                /* Start animation */

                $deferred.resolve();
                return $deferred;
            }
            function AnimationEnd3() {
                var $deferred = $.Deferred();

                /* End animation */

                $deferred.resolve();
                return $deferred;
            }
            function FormLoad_Years_Combobox(parmFormYearId) {
                var formYearSelectedValue = "";

                $('#' + parmFormYearId).on('change', function () {
                    formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val());

                    alert("This selected Year is " + formYearSelectedValue);

                    $('#' + parmFormYearId).empty();

                    AnimationBegin3().done(function () {
                        $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>");
                        $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>");
                        $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>");
                        $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>");
                        $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");

                        AnimationEnd3();
                    }).fail(function () { AnimationEnd3(); });
                });
            }

            //Load webpage...
            FormLoad_Years_Combobox('formYear');

            //Trial #1...
            //$('#formYear').val('2010').change();

            //Trial #2...
            //$('#formYear').val('2010').trigger('change');

            //Trial #3...
            //$('#formYear').trigger('change', function () { $('#formYear').val('2010'); });

            //Trial #4...
            //$('#formYear').val('2010');
            //$('#formYear').trigger('change');

            //Trial #5...
            $('#formYear').val('2010');
            $('#formYear').change();
        });
    </script>
    </head>
    <body>
        <select id="formYear" name="formYear"></select>
    </body>
</html>
4

1 回答 1

1

您需要<select>在动画运行后设置 s 的值，并在使用<option>s 填充下拉列表后。

function FormLoad_Years_Combobox(parmFormYearId) {
    var formYearSelectedValue = "";

    $('#' + parmFormYearId).on('change', function () {
        formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val());

        alert("This selected Year is " + formYearSelectedValue);

        $('#' + parmFormYearId).empty();

        AnimationBegin3().done(function () {
            $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>");
            $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>");
            $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>");
            $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>");
            $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");

            $('#' + parmFormYearId).val(formYearSelectedValue);

            AnimationEnd3();
        }).fail(function () { AnimationEnd3(); });
    });
}

在动画回调中设置值的原因是为了避免竞争条件。

您的原始代码在执行动画回调<select> 之前设置值，因此您在空下拉列表中设置值。由于 no<option>存在于具有该值的下拉列表中，因此该value属性保持为空字符串。

之后动画完成，执行回调，并用<option>s 填充下拉列表。由于 currentvalue是一个空字符串，因此下拉列表中没有选择任何内容。

为避免这种竞争条件，您需要在使用 s 填充下拉列表后<option>设置下拉列表的值，而不是在调用后设置FormLoad_Years_Combobox。

您可能希望更改FormLoad_Years_Combobox函数以接受默认值：

function FormLoad_Years_Combobox(parmFormYearId, defaultValue) {
    var formYearSelectedValue = "";
    var $year = $('#' + parmFormYearId);

    $year.on('change', function () {
        formYearSelectedValue = defaultValue || $('#' + parmFormYearId).val();

        $year.empty();

        AnimationBegin3().done(function () {
            $year.append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>")
                .append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>")
                .append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>")
                .append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>")
                .append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");
                .val(formYearSelectedValue);

            alert("This selected Year is " + formYearSelectedValue);

            AnimationEnd3();
        }).fail(function () { AnimationEnd3(); });
    });
}

//Load webpage...
FormLoad_Years_Combobox('formYear', '2010');

您还应该将结果保存$('#' + parmFormYearId)在变量中并引用它。此外，大多数 jQuery 方法都返回 jQuery 对象本身，因此您可以将方法调用链接在一起。

于 2014-11-20T17:23:02.157 回答