Question

我有一个下拉列表，在更改另一个下拉列表时通过jquery ajax调用填充，在change（）事件上执行此操作的代码：

    //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请求是否完成，那么您应该在回调中使用它。在上次设置值时，您的请求可能尚未完成。

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

1 个答案: