修改

Question

我有这个下拉列表。

 @Html.DropDownListFor(m => m.Puppies, Model.Puppy.PuppyList, new { @class = "dashboard-control",     placeholder = "Select Puppy" })

标记：

<select class="dashboard-control" data-val="true" id="Puppies" name="Puppies" placeholder="Select Puppy"><option value="2">Lab</option>

贵宾犬

此下拉列表的名称和ID为Puppies，已在Inspector中验证。

我的视图中有这个javascript：

<script type="text/javascript">

    $(document).ready(function() {
        $("#Puppies").on("change", function() {

            var selected = $(this).val();
            $("#description").html("You selected: " + selected);

        })
    });
</script>

当我在该功能的Chrome Sources窗口中放置一个中断时，它仅在页面加载时停止。我没有看到任何明显的问题。根据我为.on阅读的文档，它应该在值改变时触发。我甚至从组合中拔出来，看看是不是它会发射。我错过了什么？

Answer 1

没有看到你的代码有什么问题。这基本上是一回事，我已经测试了两种方式。

修改

既然你已经使你正在使用的id更清楚了，你应该在jquery选择器中转义句点，这样它就不会把它误认为是一个类。代码测试，工作。

$(function() {
    $('#Animals\\.Puppies').on("change", function() {
        var selected = $(this).children(':selected').text();
        $("#description").html("You selected: " + selected);

    }).change();
});

Answer 2

尝试：

$("body").on("change", "#Puppies", function() 
{
    var selected = $(this).find(":selected").val();
});

Answer 3

好的，现在正在运作。在我试图模糊下拉模型和id的过程中，我在演示代码中手动输入了id＃Animals.Puppies'。好吧，显然HTML助手，比如我正在使用@Html.DropDownListFor的那个，在id中自动将句号更改为下划线。由于我在引用ID时在函数中放置了一个句点，因此它自然不会在更改下拉列表时触发。在这个问题Preventing ASP.NET MVC from Replacing period with underscore in Html Helper IDs

中讨论了这个以及执行此操作的代码

当我使用下划线正确引用下拉列表的id而不是句点时，脚本可以正常工作。

更改HTMLDropDownListFor值时不会触发Javascript

3 个答案:

修改