Question

我正在开发一个.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，现在我的代码可以正常工作

Answer 1

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

  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>

剃刀页面下拉菜单

1 个答案: