Question

我在我的cshtml页面中使用此下拉列表。它的构成

new SelectListItem
     {
        Value = x.TitleID.ToString(),
        Text = x.TitleDescription
     });

 @Html.DropDownListFor(model => model.UserLoginModels.TitleID, Model.UserLoginModels.Title, new { @class = "form-control", @id = "title" })

我需要使用javascript

选择一个值

我试过这种方式。

var dlTitle = $("#userCreate #title").data("kendoDropDownList");
$("#title").Value(3);

但它给出了“dlTitle未定义”

Answer 1

由于id是唯一的，您只需要使用：

var dlTitle = $("#title").data("kendoDropDownList")

除了在您定义它之前检查是否正在使用dlTitle，因为您从控制台日志中收到了该错误。

Answer 2

需要注意的一些事项。

1。您应远离ID为最后一个后代的后代选择器。 ID应该是唯一的，并且仅适用于每页的单个DOM元素。在您的情况下，您使用2个ID $("#userCreate #title")来尝试访问ID为#title的DOM元素。话虽如此，它应该如下所示：

var dlTitle = $("#title").data("kendoDropDownList");

2. 如果您尝试与Kendo UI DropDownList进行互动，那么访问DropDownList的实例将通过上面的代码通过jQuery.data()完成在您的示例var dlTitle = $("#title").data("kendoDropDownList");中说明。这将为您提供该实例的参考。

要检索当前所选选项的值，您需要在Kendo DropDownList for ASP.NET MVC声明之后放置以下内容：

@* razor view logic for your DropDownList goes here *@

<script type="javascript">
$(function() {
    // Retrieve an instance of the DropDownList
    var dlTitle = $("#title").data("kendoDropDownList");

    // Log the output of the currently selected value of the DropDownList
    console.log(dlTitle.val());
});
</script>

在ASP.NET MVC声明之后放置此脚本块非常重要。如果没有，你将遇到在DropDownList有机会实例化之前调用脚本的场景。

3. 如果您打算设置DropDownList的值，那么您将执行以下操作：

@* razor view logic for your DropDownList goes here *@

<script type="javascript">
$(function() {
    // Retrieve an instance of the DropDownList
    var dlTitle = $("#title").data("kendoDropDownList");

    // Set the value of the DropDownList to the
    // 4th option in the list
    dlTitle.val(3);

    // Set the value of the DropDownList to the option
    // in the list that has a value of `foobar`
    dlTitle.val('foobar');
});
</script>

请注意，此处同样适用于Point＃2，您需要确保在ASP.NET MVC声明之后放置脚本块。

如何使用javascript在MVC中选择下拉列表的值？

2 个答案:

需要注意的一些事项。