使用Java脚本设置剃须刀下拉列表中的选定索引

Question

在我的项目中，我有三个对象：发票，InvoiceItem和PaymentMethod。发票包含发票和付款方式的列表（主人有2个详细信息）。对于InvoIteEtem和Payament方法，我有2个部分视图，这些视图在创建，编辑和详细信息页面上加载。当我从数据库中读取数据时，所有数据都是预期的下拉列表。我无法像预期的那样在下拉菜单中设置SelectedIndex。 InvoIteEtems部分视图具有2个下拉折叠（客户和运输）。 PaymentMethod部分视图有一个下拉（paymentmethoddetails）。注意：当我将数据读取到编辑中而不是下拉列表时，一切都是预期的。但是，当我尝试将所选值从模型设置为数据库时，仅对第一个下拉列表（客户）正确设置值时，其他两个下拉订单的第一个项目作为选择（未选择值）。

InvoIteItem部分视图

<div class="form-group" style="margin-left: 1px">
                @Html.LabelFor(model => model.CustomerId, "CustomerId", htmlAttributes: new { @class = "control-label col-lg-2" })
                <div class="col-lg-2" style="margin-left: 30px">
                    @Html.DropDownList("CustomerId", null, htmlAttributes: new { @class = "form-control", @id = Model.RbrStavke, @style = "width: 140px" })
                </div>
            </div>
            <div class="form-group" style="margin-left: 1px">
                @Html.LabelFor(model => model.TransportId, "TransportId", htmlAttributes: new { @class = "control-label col-lg-2" })
                <div class="col-lg-2" style="margin-left: 30px">
                    @Html.DropDownList("TransportId", null, htmlAttributes: new { @class = "form-control", @id = Model.RbrStavke, @style = "width: 100px" })
                </div>
            </div>

paymeartMethod部分视图

<div class="form-group" style="margin-left: 1px">
    @Html.LabelFor(model => model.PaymentMethodId, "PaymentMethodId", htmlAttributes: new { @class = "control-label col-lg-2" })
    <div class="col-lg-2" style="margin-left: 40px">
        @Html.DropDownList("PaymentMethodId", null, htmlAttributes: new { @class = "form-control", @id = Model.IDNacinaPlacanja, @style = "width: 200px" })
    </div>
</div>

编辑发票视图（加载两个部分视图）

    <ul class="list-group" id="ii">

        @for (int i = 0; i < Model.InvoiceItems.Count(); i++)
        {
            @Html.EditorFor(model => Model.InvoiceItems[i], "InvoiceItems")
        }
    </ul>

    <ul class="list-group" id="pm">

        @for (int i = 0; i < Model.PaymentMethods.Count(); i++)
        {
            @Html.EditorFor(model => Model.PaymentMethods[i], "PaymentMethods")
        }
    </ul>

java脚本编辑发票视图

document.addEventListener('DOMContentLoaded', function() {
                    var invoiceItem = @Html.Raw(Json.Encode(Model.InvoiceItems.Select(x => new
                    {
                        ItemId = x.ItemId,
                        CustomerId = x.CustomerId,
                        TransportId = x.TransportId
                    })));

                    var paymentMethod = @Html.Raw(Json.Encode(Model.PaymentMethods.Select(x => new
                    {
                        PaymentMethodId = x.PaymentMethodId
                    })));

                    for (var i = 0; i < invoiceItem.length; i++)
                    {
                        var id = invoiceItem[i].ItemId;
                        var c = invoiceItem[i].CustomerId;
                        var t = invoiceItem[i].TransportId;

                        document.getElementById(id).selectedIndex = c - 1;
                        //todo: set selected paymentmethod 

                    }

                    for (var i = 0; i < paymentMethod.length; i++)
                    {
                        var idPm = paymentMethod[i].PaymentMethodId;
                        //todo: set selected paymentmethod 
                    }

                }, false);

在下拉菜单中为客户ID所选项目工作。当我对运输和付款方式（document.getElementById）做同样的事情时，它不起作用。

如何更改此操作，以使其他两个下拉跌落从模型中具有正确的选择值？

Answer 1

如果要在js.中设置下拉列表的选定项目，则可以尝试使用：

$("#{idOfDropDown}").val("selectedvalue");

id应该是唯一的，因此请勿使用@id = model.rbrstavke for不同的下拉列表，{idofDropdown}应该是要设置的下拉列表的ID值。