更改事件后自动更新下拉 [英] Automatically updating dropdown after change event

问题描述

我是通过一个jquery Ajax调用填充时，另一个下拉列表中被改变，在改变（）事件中，code这确实这是一个下拉列表：

I have a dropdown list which is populated via a jquery ajax call when another dropdown list is changed, on the change() event, the code which does this:

    //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

现在这些下拉列表是会弹出点击编辑按钮，当一个对话框。我传递的数据通过对编辑对话框，所以我可以pre-填写对话框中的字段。这一切工作正常，除了下拉菜单设置为正确的值。
在code我用这样做是在这里：

Now these dropdowns are on a dialog which pops up when the "edit" button is clicked. I'm passing the data through to the edit dialog so I can pre-fill the fields on the dialog. It all works fine except for setting the dropdowns to the correct values.
The code I use to do this is here:

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

正如你所看到的，我将第一个下拉的值，触发更改事件应加载新值到第二个下拉列表中，然后将第二个下拉的价值。 的问题是，code中的第三行（设定#eventLocation）不工作，而不是下拉留下与它的选择的缺省值，在drowdown列表中的第一个值。

As you can see, I set the value of the first dropdown, trigger the change event which should load new values to the second dropdown, then set the value of the second dropdown. The problem is that the third line of code (setting #eventLocation) doesn't work, instead the dropdown is left with it's default value selected, the first value in the drowdown list.

任何建议都多少AP preciated！

Any suggestions are much appreciated!

推荐答案

您应该设置在你的Ajax请求的成功回调的最后一个下拉列表的价值。如果最后的值设置取决于Ajax请求是完整的，你应该有它的回调。很可能你的要求没有得到由最后一个值的设置发生的时间内完成。

You should set the value of the last dropdown in the success callback of your ajax request. If the last value setting depends on the ajax request being complete, you should have it in the callback. It is likely your request hasn't been completed by the time that last value setting happens.

这篇关于更改事件后自动更新下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！