时间戳

首页 > 解决方案 > 剃刀页面下拉菜单

c# - 剃刀页面下拉菜单

问题描述

我正在开发一个 .Net Asp Core Razor Page 项目，我想要一个下拉菜单，当我选择下拉菜单的一个选项时，它将显示在输入中。

这是下拉菜单的代码：

<div class="input-group">
    <input type="text" class="form-control" id="result">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
            </button>
            <div class="dropdown-menu form-control">
            <select asp-for="MyList" asp-items="@Model.MyList" required="" id="selectedOption">
                <option value="" selected="">-- Select --</option> 
            </select>
        </div>
   </div>
</div>

这是 jQuery 的代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#selectedOption').change(function () {
            var selectedValue = $(this).val();
            $('#result').val(selectedValue);
         });
     });
</script>

问题是当我从下拉列表中选择一个选项时，它不会显示在输入字段中。有没有其他方法可以获得所需的行为？

解决方案

@section scripts{

    <script type="text/javascript">
        $('#selectedOption').change(function () {
            var selectedValue = $(this).val();
            $('#result').val(selectedValue);
        });
    </script>
}

我忘了添加@section，现在我的代码工作正常

标签： c#dropdown

解决方案

尝试使用以下代码片段：下拉数据的控制器代码

  var MyList = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "ONE" },
            new SelectListItem { Value = "2", Text = "TWO" },
            new SelectListItem { Value = "3", Text = "THREE" },
            new SelectListItem { Value = "4", Text = "FOUR" },
            new SelectListItem { Value = "5", Text = "FIVE" }
        };

剃须刀代码：

<div class="input-group">
            <input type="text" class="form-control" id="result">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                </button>
                <div class="dropdown-menu form-control">
                    <select asp-for="MyList" asp-items="@Model.MyList" required="" id="selectedOption">
                        <option value="" selected="">-- Select --</option> 
                    </select>
                </div>
            </div>
        </div>

Jquery 部分更改为：

   <script type="text/javascript"> 
        $('#selectedOption').change(function () {
            var selectedValue = $(this).val();
            $('#result').val(selectedValue);
         });
   </script>

推荐阅读