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

Question

我的 MVC5 应用程序中有以下代码，它填充了几个 SelectList，然后通过 ViewBag 从我的控制器将它们传递到我的视图

控制器:

        // 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 在我的每个页面的顶部添加“<<< ADD NEW >>>”选项组。

为了尝试这个，我在视图中的第一个 @Html.DropDownList() 中添加了一个名为 "dropdown" 的 class。然后在我的脚本中，我尝试 select 所有 .dropdown class 并添加所需的 .当我刷新页面时，没有任何反应。但是（在 Google Chrome 中）如果我在 Console window 中使用相同的代码 $('select.dropdown').append('<option>' + "<<< Add New >>>" + '</option');，该选项将添加到列表的底部。

有人可以帮忙吗？为什么它在浏览器控制台中工作但在加载本身时不工作？

当页面加载时，我试图将“<<< ADD NEW >>>”作为每个列表的顶部，然后我想（点击）弹出我的 Create()查看相关列表（位置、制造商等）

Answer 1

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

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).

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

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

在您的 _Layout.cshtml 中添加：

@RenderSection("Scripts", false)

在您看来，可以这样使用它：

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

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

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

Dynamically add new option to <select> using jQuery?

asp.net-mvc

jquery

asp.net-mvc-5