javascript - 如何从在 ASP.NET CORE MVC 中使用 @Html.DropDownListFor 标记助手的下拉按钮中获取值

Question

我有一个下拉按钮，它使用 HTML 标记帮助程序@Html.DropDownListFor填充值 该按钮的代码是：

<div class="col-sm-3" id="valueSetParent">
    @Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets, "Id", "Name"), new { @class = "btn btn-sm btn-outline-secondary dropdown-toggle", @style = "font-color: white" })
</div>

我有一个 javascript 函数，它需要在下拉按钮中选择的选项的Id值。

function xyx=z(e, testId, Id) {
        e.stopPropagation();
        $('#Modal').data('test_id', testId).data('id', Id).modal('show');
    }

但是当我运行代码时，Id的值不会被发送到函数并且在这种情况下显示为NULL 。如何确保将下拉按钮中所选值的 Id 发送到 javascript 函数？

标签： javascripthtmljqueryasp.net-coreasp.net-core-mvc

Answer 1

您的意思是要获取所选项目的ID，new SelectList(Model.Sets, "Id", "Name")使ID为值，名称为所选项目的ID。您可以使用$("select").val()或$("#Id").val()在js中获取ID，而不是将数据传递给函数。这是一个演示：

控制器：

 public IActionResult DropDown() {
        DropDownModel dropDownModel = new DropDownModel();
        dropDownModel.Sets = new List<Set1> { new Set1 { Id="s1",Name="set1"},new Set1 { Id="s2",Name="set2"} };
        return View(dropDownModel);
    }

看法：

<h1>DropDown</h1>
<div>
    @Html.DropDownListFor(model => model.Id, new SelectList(Model.Sets,"Id","Name"), new { @class = "btn btn-sm btn-outline-secondary dropdown-toggle", @style = "font-color: white" })
</div>
<div>
    <button onclick="selectId()">select</button>
</div>
@section scripts{ 
<script type="text/javascript">
    function selectId() {
        alert($("select").val());
    }
</script>
}

结果：