jquery下拉列表更改在MVC局部视图中不起作用

Question

在主视图中，我有以下代码

    <script>
 $(document).ready(function () {
            $("#infopane").attr("src", '@Url.Action("ReportInfo", "Report")');
});
    </script>

<div id="mainSplitter">
    <div style="-ms-overflow-y: hidden; overflow-y: hidden; overflow-x: hidden; -ms-overflow-x: hidden;">
        <iframe id="infopane" src="" style="border-bottom: 0px;
            border-left: 0px; border-top: 0px; border-right: 0px" frameborder="0"></iframe>
    </div>
    <div style="-ms-overflow-y: hidden; overflow-y: hidden; overflow-x: hidden; -ms-overflow-x: hidden;">
        <iframe id="searchpane" src="" style="border-bottom: 0px;
            border-left: 0px; border-top: 0px; border-right: 0px" frameborder="0"></iframe>
    </div>
</div>

在部分视图中，我有以下代码

<div id="Reports">
    <span>Reports:</span> @Html.DropDownList("ddlReports", new List<SelectListItem>
        {
        new SelectListItem { Text = "Report1", Value = "1"},
        new SelectListItem { Text = "Report2", Value = "2"},
        new SelectListItem { Text = "Report3", Value = "3"}
        }, "")
</div>
<div id="ReportInfo">
    @*@{
            Html.RenderPartial("ReportInfo");
        }*@
</div>

我想要的是在部分视图1中更改下拉列表时加载第二个IFRAME（部分视图2）。

$('#ddlReports').on('change', function () {
                                var val = $(this).val();
                                var x = '@Url.Action("ReportSearch", "Report")' + "/" + val;
                                alert(x);
                                alert($("#searchpane").length);
                                $("#searchpane").attr("src", x);
});

我尝试在部分视图1中添加下拉列表jquery更改事件，该事件被触发，但它找不到＆＃34; searchpane＆＃34; IFRAME。

我还尝试在主视图中添加下拉列表jquery更改事件，但根本没有触发它。

我尝试在iframe1加载后将更改事件附加到下拉列表但仍无法正常工作。

有人可以在这里建议这个问题。感谢!!!