Question

我是MVC4的新手。我在Partial View中有dropDown列表。部分视图工作正常一段时间。使用Ajax调用使用数据更新DropDown。现在我需要在dropDown中选择文本每次选中它，解析它，并用它填充fieldS（字段位于包含Partial View的表单上）。我试图使用dropDown事件，但我似乎无法捕获事件。在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>
}

Controller:  
MyProject.cs

public ActionResult GetList(string Name, string City, string State)
{
    MyModel mm = new MyModel();
    List<MyModel> myList = mm.GetListData(Name, City, State); 
    return PartialView("_MyList", myList);
}

_MyList.cshtml

@model  IEnumerable<MyModel>

<select required id="lstMy">

    @if (Model == null || (Model != null && Model.Count() == 0))
    {
        <option value="0">---- list is empty ----</option>
    }
    else
    {
        <option value="0">---- select item ----</option>
    }

    @if (Model != null)
    {
        foreach (var item in Model)
        {
            <option value="@item.ID">@item.Name, @item.City, @item.State</option>
        }
    }
</select>

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

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

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

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

</script>
}

那么，如何在DropDown中选择文本每次选中并填充输入字段？谢谢

Answer 1

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

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

如果事件处理程序没有响应，那么你要么1）在页面上有一个中断脚本执行的错误，要么2）你在它应用的元素之前应用事件处理程序 DOM。如果您在应用页面中的元素之前执行脚本，或者通过另一个脚本动态添加元素，则可能出现第二种情况。始终将您的脚本放在关闭正文标记之前;它不仅可以防止这样的问题，还可以让浏览器更及时地呈现页面。在$(document).ready块中始终包含绑定到页面上元素的任何内容也是一个好主意，只是为了确保DOM在执行之前已完全加载，例如：

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

如果你是动态添加元素，那么你应该绑定到你知道在页面加载时会在那里的父元素，然后让它委托给动态元素：

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

此外，您无需花费足够的步法来获取选择框值。使用jQuery，select元素响应$.val()，就像任何其他输入一样：

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

Answer 2

感谢您的建议，但它没有用。在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
    });

在Partial中我测试过：

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

脚本是在关闭body标签之前，因为在布局页面中有以下代码：

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

没用。

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

MVC4 - 每次选中下拉列表（位于部分视图中）的选定文本

2 个答案: