更改事件后自动更新下拉列表

Question

我有一个下拉列表，当另一个下拉列表更改时，在 change() 事件中，它通过 jquery ajax 调用填充，代码执行此操作：

    //dropdowns switching        
        $("#eventActivity").bind("change", (function()
        {                     
            $.ajax({
                type:"POST",
                url:"<?php echo site_url('events/get_locations_for_activity'); ?>" + "/" + $(this).val(),
                data: "activityID=" + $(this).val(),
                cache: false,
                dataType: "json",
                success:function(data)
                {
                    //empty the ddl
                    $(".locationDDL").children("select:first").children("option").remove();
                    //go through the json data returned and edit the drop down
                    for( var i = 0 ; i < data.length ; i++)
                    {
                        $(".locationDDL").children("select:first").append("<option value=\"" + data[i].locationID + "\">" + data[i].name + "</option>");
                    }

                }
            });
        })).change(); //force change to run once so it works on load for the first dropdown option

现在，这些下拉菜单位于一个对话框中，当单击“编辑”按钮时会弹出该对话框。我将数据传递给编辑对话框，以便我可以预先填写对话框中的字段。除了将下拉菜单设置为正确的值外，一切正常。
我用来执行此操作的代码在这里：

$("#eventActivity").val(event.activityID);
$("#eventActivity").change(); //force the change handler to update the dropdowns
$("#eventLocation").val(event.locationID); 

如您所见，我设置了第一个下拉列表的值，触发了应该将新值加载到第二个下拉列表的更改事件，然后设置了第二个下拉列表的值。 问题是第三行代码（设置#eventLocation）不起作用，而是选择了下拉列表的默认值，即下拉列表中的第一个值。

非常感谢任何建议！

Answer 1

您应该在 ajax 请求的成功回调中设置最后一个下拉菜单的值。如果最后一个值设置取决于 ajax 请求是否完成，则应将其包含在回调中。您的请求可能在最后一次设置值时尚未完成。