Question

我有一个下拉列表，其中有一个'click'事件，我调用了一个休息服务并使用jquery更新下拉列表中的选项，所以问题是IE中的选项没有得到更新。它在chrome＆amp;其他

示例代码

       <select class="dropdown">
          <option value="1">Column1</option>
          <option value="2">Column2</option>
        </select>

         $(.dropdown).click(function () {

            var $dropdown = $(this);
            var contrId = $(this).attr('id');

            var selectedVal = $(this).val();
            $($dropdown).empty();

            $.ajax({
                url: '@Url.Content("~/FakeAPI/GETDATA")',
                dataType: "json",
                method: 'POST',
                data: { 'id': '10' },
            }).done(function (data) {
                // Clear drop down list
                $($dropdown).empty();
                // Fill drop down list with new data

                var $option = $("<option />");
                $option.attr("value", '').text('Select Column');

                $($dropdown).append($option);

                $(data).each(function () {
                    // Create option
                    var $option = $("<option />");
                    // Add value and text to option

                    $option.attr("value", this.Text).text(this.Value);
                    if (selectedVal == this.Text) {
                        $option.attr("selected", "selected");
                    }
                    // Add option to drop down list
                    $($dropdown).append($option);

                });
            });
        });
    }

任何建议都会有所帮助。

Answer 1

在I.E 9,10和11中进行测试

$(document).ready(function () {
            $(".dropdown").click(function () {
                var $dropdown = $(this);
                var contrId = $(this).attr('id');
                var selectedVal = $(this).val();
                $($dropdown).empty();
                $.ajax({
                    url: '@Url.Content("~/FakeAPI/GETDATA")',
                    dataType: "json",
                    method: 'POST',
                    data: {'id': '10'},
                }).done(function (data) {
                    // Clear drop down list
                    $($dropdown).empty();
                    // Fill drop down list with new data

                    var $option = $("<option />");
                    $option.attr("value", '').text('Select Column');
                    $($dropdown).append($option);
                    $(data).each(function () {
                        // Create option
                        var $option = $("<option />");
                        // Add value and text to option

                        $option.attr("value", this.Text).text(this.Value);
                        if (selectedVal == this.Text) {
                            $option.attr("selected", "selected");
                        }
                        // Add option to drop down list
                        $($dropdown).append($option);
                    });
                });
            });
        });

Answer 2

我认为问题是错误的IE缓存请求。将cache:false添加到您的ajax请求中，可能会在您的请求结束时添加_={timestamp}来解决问题。

$.ajax({
       cache:false,
       url: '@Url.Content("~/FakeAPI/GETDATA")',
       dataType: "json",
       method: 'POST',
       data: { 'id': '10' },

IE中的下拉列表不会在点击事件中刷新

2 个答案: