jquery - 如何在回发后维护 JQuery 检索到的下拉列表中的值

Question

基本上我使用 JQuery / Javascript 来填充我的几个下拉列表，但是在回发之后它被完全重置并且它是空的。所以我必须再次单击按钮来填写它们，并让用户选择值。

带有手动定义选项的下拉列表保留其选择的位置等...我如何确保其他 ddl 的值也保持不变？

这是代码：

<script type="text/javascript">

    (function ($) {
        $.fn.cascade = function (options) {
            var defaults = {};
            var opts = $.extend(defaults, options);

            return this.each(function () {
                $(this).change(function () {
                    var selectedValue = $(this).val();
                    var params = {};
                    params[opts.paramName] = selectedValue;
                    $.getJSON(opts.url, params, function (items) {
                        opts.childSelect.empty();
                        $.each(items, function (index, item) {
                            opts.childSelect.append(
                                $('<option/>')
                                    .attr('value', item.Id)
                                    .text(item.Name)
                            );
                        });
                    });
                });
            });
        };
    })(jQuery);

    $(function () {
        $('#loc').cascade({
            url: '@Url.Action("First")',
            paramName: 'aId',
            childSelect: $('#loc1')
        });

        $('#loc1').cascade({
            url: '@Url.Action("Second")',
            paramName: 'sId',
            childSelect: $('#loc2')
        });
    });

</script>

此代码仅调用一些返回值列表的服务器端函数

Answer 1

我有一个非常相似的方法：

jQuery.each(resObject.gaData, function(i, o) 
{
    val = o.id;
    text = o.name + " (" + o.status + "/" + o.serving + ")";
    jQuery('#gacampaign').append(jQuery('<option></option>').val(val).html(text)  );
    if ( someVar == val )
    {
        jQuery("#gacampaign option[value='" + val + "']").attr('selected',true);
    }
});

这是在 AJAX POST 的成功处理程序中，所以，不是那么通用但非常相似。唯一的区别是：

你的代码：

opts.childSelect.append($('<option/>').**attr**('value', item.Id).**text**(item.Name));

我的代码：

jQuery('#gacampaign').append(jQuery('<option></option>').**val**(val).**html**(text));

为了清空我使用的盒子

jQuery("#gacampaign option").remove();