动态地添加新的选项为＆lt;＆选择GT;使用jQuery？ [英] Dynamically add new option to <select> using jQuery?

问题描述

我在我的MVC5应用中的以下code填补几个的SelectList ，然后通过 ViewBag 我的看法

控制器

  // GET：INV_Assets /编辑/ 5
        公共异步任务＆LT;＆的ActionResult GT;编辑（INT？ID）
        {
            如果（ID == NULL）
            {
                返回新的HTTPStatus codeResult（的HTTPStatus code.BadRequest）;
            }
            INV_Assets iNV_Assets =等待db.INV_Assets.FindAsync（ID）;
            如果（iNV_Assets == NULL）
            {
                返回HttpNotFound（）;
            }            ViewBag.Location_Id =新的SelectList（db.INV_Locations，ID，location_dept，iNV_Assets.Location_Id）;
            ViewBag.Manufacturer_Id =新的SelectList（db.INV_Manufacturers，ID，manufacturer_description，iNV_Assets.Manufacturer_Id）;
            ViewBag.Model_Id =新的SelectList（db.INV_Models，ID，model_description，iNV_Assets.Model_Id）;
            ViewBag.Status_Id =新的SelectList（db.INV_Statuses，ID，status_description，iNV_Assets.Status_Id）;
            ViewBag.Type_Id =新的SelectList（db.INV_Types，ID，type_description，iNV_Assets.Type_Id）;
            ViewBag.Vendor_Id =新的SelectList（db.INV_Vendors，ID，VENDOR_NAME，iNV_Assets.Vendor_Id）;
            返回查看（iNV_Assets）;
        }
 

查看

  @model Tracker.Models.INV_Assets@ {
    ViewBag.Title =编辑;
    布局=〜/查看/共享/ _Layout.cshtml
}＆LT;脚本类型=文/ JavaScript的＆GT;
    $（'select.dropdown'）追加（'＆LT;选项＆GT;+＆LT;＆LT;＆LT;添加新的＆GT;＆GT;＆gt;中+'＆LT; /选项'）;
＆LT; / SCRIPT＆GT;
＆LT; H3＆gt;编辑资产@ Model.Id＆LT; / H3 GT＆;
@using（Html.BeginForm（））
{
    @ Html.AntiForgeryToken（）    ＆LT; D​​IV CLASS =形横＆GT;
        ＆LT;小时/＆GT;
        @ Html.ValidationSummary（真，新{@class =TEXT-危险}）
        ＆LT; D​​IV CLASS =表单组＆GT;
            @ * @ Html.LabelFor（型号=＆GT; model.Model_Id，MODEL_ID，htmlAttributes：新{@class =控制标签COL-MD-2}）* @
            ＆所述;跨度类=控制标签COL-MD-2＆GT;型号：或其可/跨度＆GT;
            ＆LT; D​​IV CLASS =COL-MD-10＆GT;
                @ Html.DropDownList（MODEL_ID，空，htmlAttributes：新{@class =的形式控制下拉}）
                @ Html.ValidationMessageFor（型号=＆GT; model.Model_Id，新{@class =TEXT-危险}）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;.....
 

此提出如下（只是一个举例）：

 ＆LT;选择类=的形式控制下拉有效的ID =MODEL_IDNAME =MODEL_ID＆GT;
    ＆LT;选项选择=选择值=1＆GT; XTERAV12＆LT; /选项＆GT;
    ＆LT;期权价值=2＆GT; 5330＆LT; /选项＆GT;
    ＆LT;期权价值=3＆GT; 6000炎刃和LT; /选项＆GT;
    ＆LT;期权价值=4＆GT; DV7650＆LT; /选项＆GT;
    ＆LT;期权价值=5＆GT; R40＆LT; /选项＆GT;
    ＆LT;期权价值=6＆GT; A1396＆LT; /选项＆GT;
    ＆LT;期权价值=7＆GT;的Inspiron 3646＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

我正在试图现在要做的是（一旦页面就绪）使用jQuery添加一个选项＆LT;＆LT;＆LT;添加新>>>我的组中的每一个的顶部<。 / p>

要试试这个，我添加了标题为我查看下拉菜单给我的第一 @ Html.DropDownList（） A类。然后在我的剧本，我试图选择所有的 .dropdown 类，并添加所需。当我刷新我的网页，没有任何反应。但是（谷歌浏览器），如果我使用相同的code $（'select.dropdown'）追加（'＆LT;选项＆GT;+＆LT;＆LT;＆LT;添加新的＆GT; ＆GT;＆gt;中+'＆LT; /选项'）; 我的控制台窗口中，选项是在列表的底部增加。

任何人都可以在这方面帮助？为什么在浏览器控制台工作，但没有负载本身？

在页面加载，我试图让＆LT;＆LT;＆LT;添加新>>>作为列表中的每一个的顶部，然后我想（在点击）弹出我创建（ ）查看对相关列表（位置，制造商等。）

解决方案

您需要使用 prePEND 方法，将插入元素作为第一个孩子，而追加后插入内容最后一个孩子：

  

的。prePEND（）方法插入指定的内容，每个元素的jQuery的集合中的第一个孩子（插入它的最后一个孩子，用 .append（））。

  $（'select.dropdown'）prePEND（'＆LT;选项＆GT;+＆LT;＆LT;＆LT;添加新的＆GT;＆GT;＆GT;+ '＆LT; /选项'）;
 

更新
使用一节，你应该做到以下几点：

在你的 _Layout.cshtml 补充一点：

  @RenderSection（脚本，FALSE）
 

在您的视图中使用这样的：

  @section脚本
{
    ＆LT;脚本＆GT;一些脚本＆LT; / SCRIPT＆GT;
}
 

您可以将部分无论你在视图中希望，它会在正确的位置呈现。

I have the following code in my MVC5 app which fills several SelectList and then passes them from my Controller via the ViewBag to my View

Controller:

        // 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);
        }

View:

@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>

.....

This renders the following (just one for example):

<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>

What I'm attempting to do now is (once the page is ready) use jQuery to add an option for "<<< ADD NEW >>>" at the TOP of each one of my groups.

To try this, I added a class titled "dropdown" to my first @Html.DropDownList() on my view. Then in my script, I'm attempting to select all with the .dropdown class and add the desired . When I refresh my page, nothing happens. However (in Google Chrome) if I use the same code $('select.dropdown').append('<option>' + "<<< Add New >>>" + '</option'); within my Console window, the option is added at the bottom of the list.

Can anyone help with this? Why is it working in the Browser Console but not on load itself?

When the page loads I'm trying to get the "<<< ADD NEW >>>" as the top of each one of the list, and then I want to (on click) popup my Create() View for the relevant list (Location, Manufacturer, etc.)

解决方案

You need to use the prepend method which will insert the element as the first child, while append insert content after the last child:

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');

Update To use section you should do the following:

In your _Layout.cshtml add this:

@RenderSection("Scripts", false)

In your view use it like this:

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

You can place the section wherever you want in the view and it will render in the correct place.

这篇关于动态地添加新的选项为＆lt;＆选择GT;使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！