Question

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

我正在使用在网页加载过程中传递给javascript的数据库中保存的值，这样做的时候就是让javascript重新进行组合框选择（之后再解决一些组合框[在这种情况下， Make，Model＆amp; Trim]）。

有没有办法让这项工作？因为我只手动选择一次，所以应该像用户通过鼠标点击手动选择组合框一样。感谢。

<!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>

Answer 1

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

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> 上的值，因此您在空下拉列表中设置值。由于该值下拉列表中不存在<option>，因此value属性仍为空字符串。

之后动画结束，执行回调，并使用<option>填充下拉列表。由于当前value是一个空字符串，因此在下拉列表中不会选择任何内容。

要避免此竞争条件，您需要在之后设置下拉列表的值，而不是在致电<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');的结果保存在变量中并引用它。此外，大多数jQuery方法返回jQuery对象本身，因此您可以将方法调用链接在一起。

在触发更改事件之前手动设置组合框值不起作用

1 个答案: