javascript - 下拉列表中值更改时触发事件

Question

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

HTML/剃刀

@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" }, }

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

Answer 1

当文档准备好时，您需要绑定事件处理程序，因此您使用$(function () {});：

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

Answer 2

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

无论是

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

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

他们都是一样的

Answer 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>

我希望这有帮助。

Answer 4

试试下面的代码

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

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

或者

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

});