Javascript 更改 HTML DropDownListFor 值时不触发

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 来源 window 中放置中断时，它只会在页面加载时停在那里。我没有看到任何明显的问题。根据我阅读的关于 .on 的文档，它应该在值更改时触发。我什至跳出了组合键，看看它是否会触发。我错过了什么？

Answer 1

看不出您的代码哪里有问题。这本质上是一回事，我已经测试了两种方式。

编辑

现在您已经更清楚地使用了 id，您应该转义 jquery 选择器中的句点，以免将其误认为 class.代码经过测试，有效。

$(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 时，脚本有效。

Javascript 更改 HTML DropDownListFor 值时不触发

Javascript not firing when changing HTMLDropDownListFor value

javascript

razor

编辑