更改 HTMLDropDownListFor 值时 Javascript 未触发

Javascript not firing when changing HTMLDropDownListFor value

本文关键字：Javascript HTMLDropDownListFor 值时 更改      更新时间：2023-09-26

我有这个下拉列表。

 @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 是"小狗，已在检查器中验证"。

我的观点中有这个javascript：

<script type="text/javascript">
    $(document).ready(function() {
        $("#Puppies").on("change", function() {
            var selected = $(this).val();
            $("#description").html("You selected: " + selected);
        })
    });
</script>

当我在函数的 Chrome 源窗口中放置一个中断时，它只会在页面加载时停止在那里。 我没有看到任何明显的问题。 根据我为 .on 阅读的文档，当值更改时，它应该触发。 我什至退出了组合，看看它是否会在什么时候发射。 我错过了什么？

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

编辑

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

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

尝试：

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

好的，这现在可以工作了。 在我试图混淆下拉列表的模型和 id 时，我在演示代码中手动键入了 id #Animals.Puppies'。 好吧，显然HTML帮助程序，例如我使用的@Html.DropDownListFor，在id中自动将句点更改为下划线。 由于我在引用 ID 时在函数中放置了一个句点，因此自然不会在更改下拉列表时触发。 在此问题中，对此进行了讨论以及执行此操作的代码 防止 ASP.NET MVC 在 Html 帮助程序 ID 中将句点替换为下划线

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

相关文章：