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

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会以下拉列表的默认选中值进行渲染，并且不会改变虽然选定的值发生了变化。所以您可以尝试使用 js 来获取值。并将 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>

结果：