ajax同步，页面显示与html代码不一致

1.ajax同步请求数据，然后把数据append到一个select控件，结果是，html已经改变，可是页面显示的却还是原来的下拉数据，但是奇怪的时选择出来的结果却是新的选项数据。代码如下：

$.ajax({
        async: true,
        type: "post",
        dataType: "html",
        url: "/Handler.ashx",
        data: {
            "ID": ID,

        },
        success: function (SpecialProductStr) {

            if (SpecialProductStr == undefined || SpecialProductStr == null) {
                return;
            }

            var SpecialProductInfo = jQuery.parseJSON(SpecialProductStr);

            CalculateRowObject.find("select[name='SpecialProduct']").find("option").remove();
            CalculateRowObject.find("select[name='SpecialProduct']").removeClass("selectbox");
            CalculateRowObject.find("select[name='SpecialProduct']").addClass("selectbox");
            var defaultoption = "<option value='-1' >--请选择--</option>";
            CalculateRowObject.find("select[name='SpecialProduct']").append(defaultoption);

            if (SpecialProductInfo == undefined || SpecialProductInfo == null) {
                return;
            }

            for (var i = 0; i < SpecialProductInfo.length; i++) {
                var Productoption = "<option value='" + SpecialProductInfo[i].ProductID + "'>aaaa</option>";

                CalculateRowObject.find("select[name='SpecialProduct']").append(Productoption);

            }

//加上红色的代码，就会正常显示了

            CalculateRowObject.find("select[name='SpecialProduct']").css("display", "none");
            CalculateRowObject.find("select[name='SpecialProduct']").css("display", "block");

        }
    });

非正常解决办法，1.就是上面那两名红色的，也就是把它隐藏再显示一下，就好了，相当奇怪;

2.就是把同步改为异步，也是没有问题的