使用 JavaScript 的下拉列表

Question

希望开发者多多支持，我对java script的使用经验很少。

经过调查和多次尝试，我能够从 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 将如何处理

谢谢

Answer 1

如果我正确理解您的问题，我认为您需要使用 Linq 表达式命名您正在创建的对象的字段，使其看起来像这样：

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

这里有几个例子：https://code.msdn.microsoft.com/LINQ-to-DataSets-09787825#SelectAnonymousTypes1

然后您可以使用 data[i].id 和 data[i].value 从您的 javascript 访问这些字段。 我希望这会有所帮助。

Answer 2

我怀疑您的问题与从 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>

Answer 3

感谢大家，代码如下

控制器

 [HttpPost]
    public ActionResult GetAsentamiento(string CP)
    {
        var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { Value = p.IdCodigoPostal, Text= p.Asentamiento }).ToList();
        SelectList lista = new SelectList(drop2);
        return Json(lista.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.length; i++) {
                $('#Asentamientos').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
            }
        }
    });
}