从下拉列表中获取选定的值

Question

我想根据我从下拉列表中选择的值绘制一个具有不同状态图像的圆圈。

如何访问我的 razor 页面中的值？

这是我的代码

        <div class="form-group">
            @Html.LabelFor(model => model.CustomerNeed.NeedState, htmlAttributes: new { @class = "form-group" })
            <div class="form-group">
                @Html.DropDownListFor(model => model.CustomerNeed.NeedState, new List<SelectListItem>
                {
                    new SelectListItem {Text = "Bedarf erfasst", Value = "Need specified", Selected = true },
                    new SelectListItem {Text = "Qualifikation", Value = "Qualification"},
                    new SelectListItem {Text = "Talent Zuweisung", Value = "Talent assignment" },
                    new SelectListItem {Text = "Am Offerieren", Value = "Quotation" },
                    new SelectListItem {Text = "Auftrag bestätigt", Value = "Order Confirmed" },
                    new SelectListItem {Text = "Wird ausgeführt", Value = "In Action" },
                    new SelectListItem {Text = "Abgeschlossen", Value = "Finished" },
                }, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CustomerNeed.NeedState, "", new { @class = "text-danger" })

                @{

                    if  (x == "Need specified")
                    {
                        <div class="finished">
                            <div class="imgcircleSeleted">
                                <img src="/images/Finished.png" alt="finished">
                            </div>
                            <label>@Localizer["Demand fulfilled"]</label>
                        </div>


                    }
                    else
                    {
                        <div class="signed">
                            <div class="imgcircleSelected">
                                <img src="/images/Signed.PNG" alt="customer signed contract">
                            </div>
                            <span class="line"></span>
                            <label>@Localizer["Contract signed"]</label>
                        </div>
                        
                    }
                }


            </div>
        </div>

感谢您的帮助

Answer 1

首先，你无法通过@{if (x == "Need specified")}动态获取下拉列表的值，x代码中将使用默认选择的下拉列表值呈现，并且不会即使选择的值 changes.So 已更改您可以尝试使用 js 来获取 value.and 将 div 设置为隐藏或显示。这是一个演示：

查看：

<div class="form-group">
    @Html.LabelFor(model => model.CustomerNeed.NeedState, htmlAttributes: new { @class = "form-group" })
    <div class="form-group">
        @Html.DropDownListFor(model => model.CustomerNeed.NeedState, new List<SelectListItem>
        {
            new SelectListItem {Text = "Bedarf erfasst", Value = "Need specified", Selected = true },
            new SelectListItem {Text = "Qualifikation", Value = "Qualification"},
            new SelectListItem {Text = "Talent Zuweisung", Value = "Talent assignment" },
            new SelectListItem {Text = "Am Offerieren", Value = "Quotation" },
            new SelectListItem {Text = "Auftrag bestätigt", Value = "Order Confirmed" },
            new SelectListItem {Text = "Wird ausgeführt", Value = "In Action" },
            new SelectListItem {Text = "Abgeschlossen", Value = "Finished" },
        }, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CustomerNeed.NeedState, "", new { @class = "text-danger" })

        <div class="finished" id="finished">
            <div class="imgcircleSeleted">
                <img src="/images/Finished.png" alt="finished">
            </div>
            <label>@Localizer["Demand fulfilled"]</label>
        </div>
        <div class="signed" id="signed" hidden>
            <div class="imgcircleSelected">
                <img src="/images/Signed.PNG" alt="customer signed contract">
            </div>
            <span class="line"></span>
            <label>@Localizer["Contract signed"]</label>
        </div>
    </div>
</div>

js:

<script>
    $("#CustomerNeed_NeedState").change(function () {
        if ($(this).val() == "Need specified") {
            $("#finished").removeAttr("hidden");
            $("#signed").attr("hidden", "hidden");
        } else {
            $("#signed").removeAttr("hidden");
            $("#finished").attr("hidden", "hidden");
        }
    })
</script>

结果：

从下拉列表中获取选定的值

Getting selected value from dropdownlistfor

razor

dropdown

asp.net-core