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

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

我正在使用数据库中保存的值，这些值在网页加载期间传递给javascript，完成后是让javascript重新进行组合框选择（之后又触发了几个组合框[在这种情况下，Make，Model和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>

您需要在

动画运行后以及用 <option> s 填充下拉列表后设置<select>的值。

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> s 填充下拉列表。由于当前value是空字符串，因此不会在下拉列表中选择任何内容。

若要避免此争用条件，需要在用 <option> s 填充下拉列表后设置下拉列表的值，而不是在调用 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 对象本身，以便您可以将方法调用链接在一起。

相关内容

最新更新

热门标签：