时间戳

首页 > 解决方案 > 带有 java 脚本的 DropDownList

javascript - 带有 java 脚本的 DropDownList

问题描述

希望开发者能支持我，我对java脚本的使用经验很少。

经过调查和几次尝试，我能够从 LINQ 查询中加载一个包含数据的下拉列表，并将文本框的值作为参数传递。

我不能做的是从查询 Linq 获取两个字段（Id 和 value）将它们发送到下拉列表并显示值，但是在能够使用该字段的 Id 以便能够在创建中使用它之后，目前我只能显示价值，但我也需要 Id。

看法

@Html.TextBox("CP", "", new { @id = "txtCP", @onchange = "FillOption();", @placeholder = "Codigo Postal" })
@Html.DropDownList("Asentamientos", ViewBag.Drop as List<SelectListItem>)

脚本

<script>
    function FillOption() {
        var CP = $('#txtCP').val();
        $.ajax({
            type: "Post",
            url: "/Home/GetAsentamiento",
            data: { CP: CP },
            dataType: 'json',
            success: function (data) {
                $("#Asentamientos").empty();
                for (var i = 0; i < data.length; i++) {
                    $('#Asentamientos').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
                }
            }
        });
    }
</script>

控制器

 public ActionResult Index()
        {
            List<SelectListItem> drop = new List<SelectListItem>
            {
            };
            ViewBag.Drop = drop;
            return View();

        }

        [HttpPost]
        public ActionResult GetAsentamiento(string CP)
        {
            var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select p.Asentamiento).ToList();
            SelectList lista = new SelectList(drop2);
            ViewBag.lista = lista;
            return Json(ViewBag.lista);
        }

我想到了类似的东西

 [HttpPost]
        public ActionResult GetAsentamiento(string CP)
        {
            var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { p.IdCodigoPostal,p.Asentamiento}).ToList();
            SelectList lista = new SelectList(drop2);
            ViewBag.lista = lista;
            return Json(ViewBag.lista);
        }

但我不知道如何处理 id 和 value

谢谢

标签： javascriptc#asp.net-mvcdrop-down-menu

解决方案

我怀疑您的问题与从 API 结果中提取数据有关。您正在 ViewBag 中设置新属性，然后返回 ViewBag 属性。这确实不是必需的，您应该只返回您的列表，列出这样（注意：并且 SelectItemList 有一个名为“Items”的属性，其中包含您添加的所有项目）：

 [HttpPost]
        public ActionResult GetAsentamiento(string CP)
        {
            var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { p.IdCodigoPostal,p.Asentamiento}).ToList();
            SelectList lista = new SelectList(drop2);
            return Json(lista.Items);
        }

这应该只返回一个很好的 ListItems 列表。您也可以更改您的 jQuery 以循环访问 items 属性，如下所示：

<script>
    function FillOption() {
        var CP = $('#txtCP').val();
        $.ajax({
            type: "Post",
            url: "/Home/GetAsentamiento",
            data: { CP: CP },
            dataType: 'json',
            success: function (data) {
                $("#Asentamientos").empty();
                for (var i = 0; i < data.Items.length; i++) {
                    $('#Asentamientos').append('<option value=' + data.Items[i].Value + '>' + data.Items[i].Text + '</option > ');
                }
            }
        });
    }
</script>

推荐阅读