在页面加载和更改时使用AJAX填充SELECT元素

我有一个SELECT元素，当我选择选项更改时使用AJAX填充表单。使用下面的代码可以很好地工作：在页面加载和更改时使用AJAX填充SELECT元素

$(function() { 
    function populate() { 
    $.getJSON('/action/' + $(this).val(), {}, function(data, textStatus) { 
     var el = $('select#two'); 
     el.html(''); // empty the select 
     $.each(data, function(idx, jsonData) { 
     el.append($('<option></option>').val(jsonData.id).html(jsonData.name)); 
     }); 
    }); 
    } 

    $("select#one").change(populate); 
});

当然这只有当第一次下拉首先被改变时才起作用。我想要做的是使用相同的方法预先填充页面第一次加载时的第二个下拉列表。

我能想到的唯一的办法就是如下修改getJSON电话：

$.getJSON('/action/' + $("select#one").val(), {}, function(data, textStatus)

（即不使用$(this)）

，然后简单地在底部调用这个'在负载'初始化块：

populate();

虽然这工作，它只是感觉不对。任何人都可以提出一个更好的解

来源

2009-11-19 Olly

您可以通过添加.trigger('change')你选择像这样触发更改事件：

$("select#one").change(populate).trigger('change');

来源

2009-11-19 13:32:47 David

在我看来，最好是用填充服务器端代码的第一选择。使用Ajax调用进行此操作可能会引入一个时间间隔，即显示页面但选择框保持空白的时间间隔。当页面来自缓存时，这很容易发生。用户会感到困惑，可能需要再次尝试才能看到选择。

来源

2009-11-19 13:44:21 kgiannakakis

在页面加载和更改时使用AJAX填充SELECT元素

回答

相关问题