如何使用jquery动态创建下拉列表？ [英] How can create dropdownlist dynamically with jquery?

问题描述

请原谅我因为我的英语不太好！

我的情景是我想从First dropdownliast获取数据并绑定到动态下拉列表。



我尝试了什么：



在控制器中我为第一个下拉列表执行此操作：

Please Excuse Me Because my english language in not very well!
My Scenario is I want to get data from First dropdownliast and Bind to dynamic dropdownlist.

What I have tried:

In controller I do this for first dropdownlist:

public ActionResult Create()
        {
            List<SelectListItem> Zone = new Karaneh_Inf().C_Tbl_Center.Select(p => new SelectListItem()
            {
                Text = p.ZoneName,
                Value = p.IdZone.ToString(),
            }).Distinct().ToList();
            ViewBag.Zone = Zone;
            return View();
        }

查看：

In View:

<div class="form-group">
            @Html.LabelFor(model => model.IdZone, "منطقه", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("zoneid", ViewBag.Zone as List<SelectListItem>, null, htmlAttributes: new { @class = "form-control", onChange = "Get(this.value)" })
                @Html.ValidationMessageFor(model => model.IdZone, "", new { @class = "text-danger" })
            </div>
        </div>

<select id="centers">
            <option>No-Data</option>
        </select>

然后我将jquery用于ajax：

Then I use jquery for ajax:

function Get(zoneid) {


            $.ajax('/Person/CenterDDL/' + zoneid).done(function (data) {
                $('#centers').append(data);
            });
        }

我也写了一个动作来创建第二个dropdownliast的部分视图：

Also I write a action to create partialview for second dropdownliast:

public PartialViewResult CenterDDL(int zoneid)
        {
            return PartialView(new Karaneh_Inf().C_Tbl_Center.Where(p => p.IdZone == zoneid).ToList());
        }

然后创建PartialView：

Then Create PartialView:

@using Karaneh.Models
@model List<c_tbl_center>


<div class="form-group">
    <label>Center</label>
    <div class="col-md-10">
        @foreach (C_Tbl_Center center in Model)
        {
            <option value="@center.CenterCode">@center.CenterName</option>
        }
    </div>
</div>

但是当我运行项目时，没有创建任何动态下拉列表！

But when I run the project,doesn't created any dynamically dropdownliat!

解决方案

.ajax（'/ Person / CenterDDL /'+ zoneid）.done（function（data）{

.ajax('/Person/CenterDDL/' + zoneid).done(function (data) {

（'#centers'） .append（数据）;
}）;
}

('#centers').append(data); }); }

我也写了一个动作来创建第二个dropdownliast的部分视图：

Also I write a action to create partialview for second dropdownliast:

public PartialViewResult CenterDDL(int zoneid)
        {
            return PartialView(new Karaneh_Inf().C_Tbl_Center.Where(p => p.IdZone == zoneid).ToList());
        }

然后创建PartialView：

Then Create PartialView:

@using Karaneh.Models
@model List<c_tbl_center>


<div class="form-group">
    <label>Center</label>
    <div class="col-md-10">
        @foreach (C_Tbl_Center center in Model)
        {
            <option value="@center.CenterCode">@center.CenterName</option>
        }
    </div>
</div>

但是当我运行项目时，没有创建任何动态下拉列表！

But when I run the project,doesn't created any dynamically dropdownliat!

这篇关于如何使用jquery动态创建下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！