Javascript MVC4-每次获取下拉列表（位于局部视图中）的选定文本时'；被选中

我是MVC4的新手。我有部分视图中的下拉列表。局部视图在一段时间内运行良好。使用Ajax调用使用数据更新下拉列表。现在，每次选中文本时，我都需要在下拉列表中选择它，解析它，并用它填充字段（字段位于包含部分视图的表单上）。我试图使用下拉事件，但似乎无法捕捉事件。在MVC4中实现上述功能的正确方法是什么？（我在网上做了研究，尝试了很多方法，但似乎没有任何效果）。这是我的最新代码：

MyPage.cshtml

@model  IEnumerable<MyModel>

<div>
    <div id="divMyList">
        @Html.Partial("_MyList", Model)                                
    </div>
    <div>
        <input id="myInputId" />
    </div>
    <div class="center">
        <button type="button" class="jqbutton" id="btnGetList">Get List</button>
    </div>
    <div class="center">
        <button type="submit" id="btnMy" class="jqbutton">Submit</button>
    </div>
    ...
</div>


//Any other scripts in this section work fine
@section scripts{
<script type="text/javascript">

    $("#lstMy").select(function () {
        alert("select in form");       //does Not appear when item selected in lstMy
     });

     $("#lstMy").change(function () {
        alert("change in form");       //does Not appear when item selected in lstMy
     });

     $("#lstMy").click(function () {
        alert("click in form");        //does Not appear when item selected in lstMy
     });


//I AM able to get text of selected item on button click(see below), But it is NOT what I need.
    $("#btnMy").click(function () {            
        $('#myInputId').val($('#lstMy :selected').text().split(',')[0]);
        var v2 = $('#myInputId').val();
        alert(v2);    // Appears and shows correct value which is Name
    });

</script>

@section MyList{
    <script type="text/javascript">

        $('#btnGetList').on('click', function (event) {

            var cn = $('#txtName').val();
            var cc = $('#txtCity').val();
            var cs = $('#ddlState').val();           

            $.ajax({
                type: "POST",
                url: '/MyProject/GetList',
                data: { Name: cn, City: cc, State: cs },
                success: function (data) {
                    //alert("List is here");
                    $("#divMyList").html(data);                   
                }
            });
        })
</script>
}

MyPage.cshtml
@模型IEnumerable
@Html.Partial（“\u MyList”，Model）
获取列表
提交
...
//本节中的任何其他脚本都可以正常工作
@节脚本{
$（“#lstMy”）。选择（函数（）{
警报（“在表单中选择”）；//在lstMy中选择项目时不显示
});
$（“#lstMy”）.change（函数（）{
警报（“形式更改”）；//在lstMy中选择项目时不显示
});
$（“#lstMy”）。单击（函数（）{
警报（“在表单中单击”）；//在lstMy中选择项目时不显示
});
//我能够在点击按钮时获得所选项目的文本（见下文），但这不是我所需要的。
$（“#btnMy”）。单击（函数（）{
$（'myInputId'）.val（$（'lstMy:selected'）.text（）.split（'，'）[0]）；
var v2=$（'#myInputId'）.val（）；
警报（v2）；//显示并显示正确的值，即名称
});
@剖面MyList{
$（'btnGetList'）。在（'click'，函数（事件）{
var cn=$（'#txtName'）.val（）；
var cc=$（'#txtCity'）.val（）；
var cs=$（'#ddlState'）.val（）；
$.ajax({
类型：“POST”，
url:“/MyProject/GetList”，
数据：{名称：cn，城市：cc，州：cs}，
成功：功能（数据）{
//警报（“列表在此”）；
$（“#divMyList”）.html（数据）；
}
});
})
}

---

控制器：
MyProject.cs
public ActionResult GetList（字符串名称、字符串城市、字符串状态）
{
MyModel mm=新的MyModel（）；
List myList=mm.GetListData（名称、城市、州）；
返回PartialView（“MyList”，MyList）；
}

---

\u MyList.cshtml
@模型IEnumerable
@if（Model==null | |（Model！=null&&Model.Count（）==0））
{
----列表为空----
}
其他的
{
----选择项----
}
@如果（型号！=null）
{
foreach（模型中的var项目）
{
@item.Name，@item.City，@item.State
}
}
@节脚本{
$（“#lstMy”）。选择（函数（）{
警报（“选择”）；//在lstMy中选择项目时不显示
});
$（“#lstMy”）.change（函数（）{
警报（“更改”）；//在lstMy中选择项目时不显示
});
$（“#lstMy”）。单击（函数（）{
警报（“单击”）；//在lstMy中选择项目时不显示
});
}

---

那么，如何在每次选择文本时在下拉列表中选择文本并填充输入字段呢？

---

谢谢

捕捉选择框值更改的正确方法是使用“更改”事件

如果事件处理程序没有响应，则1）页面上出现错误，中断了脚本执行，或者2）在事件处理程序应用到的元素位于DOM中之前应用了事件处理程序。如果在其应用到的页面中的元素之前执行脚本，或者在调用时添加了该元素，则可能出现第二种情况通过另一个脚本。始终将脚本放在结束正文标记之前；这不仅可以防止类似问题，而且还允许浏览器以更及时的方式呈现页面。最好始终在

$（文档）中包含绑定到页面元素的任何内容.ready

块，只是为了确保DOM在执行前已完全加载，例如：

$(document).ready(function () {
    // put your code here
});

如果要动态添加元素，则应绑定到页面加载时会出现的父元素，然后让它委托给动态元素：

$('#parentElement').on('change', '.dynamicElement', function () {
    // do something
});

此外，您为获取选择框值所做的花哨的步法是不必要的。使用jQuery，选择元素响应

$.val（）

，就像任何其他输入一样：

var selectedValue = $('#lstMy').val();

---

谢谢你的建议，但没用。 在MyPage.cshtml上，我测试了：

$('#lstMy').on('change', function () {
    alert("change event on Page");       // Did NOT appear
});

    $('#divMyList').on('change', '.lstMy', function () {
        // do something
        alert("change on Page 2");       // Did NOT appear
    });

$('#lstMy').on('change', function () {
    alert("change event on Partial");   // Did NOT appear
});

在部分测试中，我测试了：

$('#lstMy').on('change', function () {
    alert("change event on Page");       // Did NOT appear
});

    $('#divMyList').on('change', '.lstMy', function () {
        // do something
        alert("change on Page 2");       // Did NOT appear
    });

$('#lstMy').on('change', function () {
    alert("change event on Partial");   // Did NOT appear
});

脚本位于关闭主体标记之前，因为在布局页面中有以下代码：

    @RenderSection("scripts", required: false)    
</body>

@RenderSection（“脚本”，必需：false）

不起作用

此外，我不能将代码放入“$（document）.ready（function（）{）”中，因为我需要捕获下拉列表中的每次单击以选择它的项。 还有其他建议吗？

---

谢谢

您是否尝试将其放入DOM ready中？请问，您对如何从我的MVC4场景中的下拉列表中检索每次单击（项目）时选择的文本有何建议？

    @RenderSection("scripts", required: false)    
</body>