下拉列表中值更改时触发事件答案

【问题标题】：Fire event on change of value in dropdownlist下拉列表中值更改时触发事件
【发布时间】：2013-07-23 09:00:24
【问题描述】：

我的页面中有一个下拉菜单。在该下拉列表中的值发生变化时，必须触发一个事件。

HTML/Razor

@Html.DropDownList("Reason", new[] { new SelectListItem { Text="-Select-", Value= "-Select-",Selected=true }, new SelectListItem { Text="Price", Value= "Price" }, new SelectListItem { Text="3P", Value= "3P" }, new SelectListItem { Text="Freight Collect", Value= "Freight Collect" }, new SelectListItem { Text="Change in Relationships", Value= "Change in Relationships" }, }

我尝试了以下代码，但事件没有被触发。

【问题讨论】：

$('#Reason').change(function () { alert($("#Reason").val()); UpdateRecords(); });我正在使用以下代码
你能显示html/razor吗？
检查控制台是否有任何错误。还要将您的代码封装在 $(function() { // your code }); 中
@veena 编辑您的问题并将相关代码放在那里，而不是在 cmets...
@veena：你也没有展示足够的代码来说明什么是有效的。请记住提供尽可能多的代码和详细信息，说明您尝试过的内容和无效的内容。

标签： javascript jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

【解决方案1】：

需要在文档准备好时绑定事件处理程序，所以使用$(function () {});：

$(function () {
    $("#Reason").on("change", function () { 
        // You're referring to the object itself, so you can use $(this).
        alert(this.value); 
        UpdateRecords(); 
    });
});

【讨论】：

+1 如果你解释什么和为什么。
它没有进入函数本身
你在这里缺少括号 $(this.val() 和 this.value 就足够了 select
你可以使用$(this).val(); 或this.value

【解决方案2】：

当您尝试附加 event 侦听器时，这又是一个问题，#Reason 实际上并不存在于 DOM 中。在执行此操作之前，您需要确保 DOM 已准备就绪..

任一个

$(document).ready(function() {
   // Code here..
});

$(function(){
   // Code here...
});

它们都是一样的

【讨论】：

【解决方案3】：

我尝试复制您的代码以尝试让您的解决方案发挥作用。以下是我想出的，并且已经过测试。请根据您的情况进行编辑。

为了便于阅读，我已经缩进了你的下拉标记：

@Html.DropDownList("Reason",
     new[]
     {
          new SelectListItem { Text="-Select-", Value= "-Select-", Selected = true },
          new SelectListItem { Text="Price", Value= "Price" },
          new SelectListItem { Text="3P", Value= "3P" },
          new SelectListItem { Text="Freight Collect", Value= "Freight Collect" },
          new SelectListItem { Text="Change in Relationships", Value= "Change in Relationships" }
     }
)

结果输出如下所示：

<select id="Reason" name="Reason">
     <option selected="selected" value="-Select-">-Select-</option>
     <option value="Price">Price</option>
     <option value="3P">3P</option>
     <option value="Freight Collect">Freight Collect</option>
     <option value="Change in Relationships">Change in Relationships</option>
</select>

为了触发事件，您需要在下拉列表中添加一个侦听器。在 jQuery 中，订阅 on change 事件非常容易。

你的 jQuery 看起来像这样：

<script>
     $(document).ready(function () {
          $('#Reason').change(function () {
               alert('select value has changed to ' + $('#Reason').val());

               UpdateRecords();
          });
     });
</script>

我希望这会有所帮助。

【讨论】：

【解决方案4】：

试试下面的代码

$('#Reason').change(function () {

$("#yourdropdownid option:selected").text();

或

$("#yourdropdownid option:selected").val();

});

【讨论】：

你试过这样$('#Reason').change(function () { $("#Reason option:selected").text(); });代码>@veena
@selva 你知道<code> 块是什么吗？我想你的意思是<script> 标签。