动态添加新选项 <select>使用jQuery吗？

Question

我的MVC5应用程序中包含以下代码，该代码填充了多个SelectList ，然后将它们从我的控制器通过ViewBag到View

控制器 ：

        // GET: INV_Assets/Edit/5
        public async Task<ActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            INV_Assets iNV_Assets = await db.INV_Assets.FindAsync(id);
            if (iNV_Assets == null)
            {
                return HttpNotFound();
            }

            ViewBag.Location_Id = new SelectList(db.INV_Locations, "Id", "location_dept", iNV_Assets.Location_Id);
            ViewBag.Manufacturer_Id = new SelectList(db.INV_Manufacturers, "Id", "manufacturer_description", iNV_Assets.Manufacturer_Id);
            ViewBag.Model_Id = new SelectList(db.INV_Models, "Id", "model_description", iNV_Assets.Model_Id);
            ViewBag.Status_Id = new SelectList(db.INV_Statuses, "Id", "status_description", iNV_Assets.Status_Id);
            ViewBag.Type_Id = new SelectList(db.INV_Types, "Id", "type_description", iNV_Assets.Type_Id);
            ViewBag.Vendor_Id = new SelectList(db.INV_Vendors, "Id", "vendor_name", iNV_Assets.Vendor_Id);
            return View(iNV_Assets);
        }

查看 ：

@model Tracker.Models.INV_Assets

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $('select.dropdown').append('<option>' + "<<< Add New >>>" + '</option');
</script>


<h3>Edit Asset @Model.Id</h3>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @*@Html.LabelFor(model => model.Model_Id, "Model_Id", htmlAttributes: new { @class = "control-label col-md-2" })*@
            <span class="control-label col-md-2">Model:</span>
            <div class="col-md-10">
                @Html.DropDownList("Model_Id", null, htmlAttributes: new { @class = "form-control dropdown" })
                @Html.ValidationMessageFor(model => model.Model_Id, "", new { @class = "text-danger" })
            </div>
        </div>

.....

这将呈现以下内容（例如，仅一个）：

<select class="form-control dropdown valid" id="Model_Id" name="Model_Id">     
    <option selected="selected" value="1">XTERAV12</option>
    <option value="2">5330</option>
    <option value="3">Sunblade 6000</option>
    <option value="4">DV7650</option>
    <option value="5">R40</option>
    <option value="6">A1396</option>
    <option value="7">Inspiron 3646</option>
</select>

我现在想做的是（一旦页面准备好了）使用jQuery在我的每个组的顶部添加“ <<<添加新>>>”的选项。

要尝试此操作，我在视图上的第一个@Html.DropDownList()添加了一个名为“下拉列表”的类。 然后在我的脚本中，尝试使用.dropdown类选择所有.dropdown并添加所需的。 当我刷新页面时，什么也没有发生。 但是（在谷歌浏览器中）如果我使用相同的代码$('select.dropdown').append('<option>' + "<<< Add New >>>" + '</option'); 在我的Console窗口中，该选项添加在列表的底部。

有人能帮忙吗？ 为什么它可以在浏览器控制台中运行但不能在加载时正常运行？

页面加载时，我试图将“ <<<添加新>>>”作为列表中每个列表的顶部，然后我想（单击）弹出我的Create（）视图以获取相关列表（位置，制造商等）

Answer 1

您需要使用prepend方法，该方法会将元素作为第一个孩子插入，而append插入内容append到最后一个孩子之后：

.prepend()方法将指定的内容作为jQuery集合中每个元素的第一个子项插入（要将其作为最后一个子项插入，请使用.append() ）。

$('select.dropdown').prepend('<option>' + "<<< Add New >>>" + '</option');

更新要使用部分，您应该执行以下操作：

在您的_Layout.cshtml添加以下内容：

@RenderSection("Scripts", false)

在您看来，使用它的方式如下：

@section Scripts 
{
    <script>some script</script>
}

您可以将section放置在视图中的任何位置，它将在正确的位置呈现。