为什么当我调试我的值选项标签 html 时未定义？答案

【问题标题】：Why when i debug my value option tag html is undefined?为什么当我调试我的值选项标签 html 时未定义？
【发布时间】：2021-01-05 15:55:20
【问题描述】：

我已经尝试调试以下错误几个小时，但没有解决方案 JS 仍然未定义，但控制器中的 id 参数有一个值。请帮忙。我需要它。

这段html代码在调试时，值未定义，为什么值未定义？

<select id="cmbTipe" class="form-control">
                <option value="-1">Select Jenis</option>
                <option value="undefined">undefined</option>
                <option value="undefined">undefined</option>
            </select>

我的控制器

namespace PerhitunganKeuntunganParkir.Controllers{

public class ParkirController : Controller
{
    private readonly JenisKendaraanRepository _jeniskendaraanRepository = null;
    private readonly TipeKendaraanRepository _tipekendaraanRepository = null;
    private readonly ParkirContext _context = null;

    //Dependency Injection
    public ParkirController(JenisKendaraanRepository jenisKendaraanRepository, TipeKendaraanRepository tipeKendaraanRepository, ParkirContext context)
    {
        _jeniskendaraanRepository = jenisKendaraanRepository;
        _tipekendaraanRepository = tipeKendaraanRepository;
        _context = context;
    }

    public async Task<ViewResult> GetAllJenis()
    {
        ViewBag.Jenis = await _jeniskendaraanRepository.GetJenisKendaraan();

        return View();
    }

    public IActionResult LoadTipeC(int jenisId)
    {
        
        return Json(_context.TipeKendaraan.Where(s=>s.JenisKendaraanId ==
            jenisId).Select(s=> new TipeKendaraanModel{
                Id = s.Id,
                Tipe=s.Tipe

        }).ToList());
    }

我的观点

在 HTML 中，我的级联下拉列表中的值未定义，为什么会发生这种情况？ JavaScript 正在运行，但 HTML 中的值未定义

@{
    ViewData["Title"] = "Input Form";

@model JenisKendaraanModel

<div class="container">
    <form method="post" asp-action="GetAllJenis" asp-controller="Parkir">
        <div class="form-group">
            <label asp-for="Jenis"></label>
            <select id="cmbJenis" class="form-control">
                <option value="-1">Select Jenis</option>
                @foreach (var jenis in ViewBag.Jenis)
                {
                    <option value="@jenis.Id">@jenis.Jenis</option>
                }
            </select>
            <span asp-validation-for="Jenis" class="text-danger"></span>
        </div>

        <div class="form-group">
            <select id="cmbTipe" class="form-control">
            </select>
        </div>


        <script src="~/lib/jquery/jquery.js" type="text/javascript"></script>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#cmbJenis').on('change', function () {
                var jenisId = $('#cmbJenis option:selected').val();
                $.ajax({
                    type: 'GET',
                    data: { jenisId: jenisId },
                    url: '@Url.Action("LoadTipeC","Parkir")',
                    success: function (result) {
                        //var tipe = JSON.parse(result);
                        var s = '<option value="-1">Select tipe</option>';
                        for (var i = 0; i < result.length; i++) {
                            s += '<option value="' + result[i].Id + '">' + result[i].Tipe + '</option>';
                        }
                        $('#cmbTipe').html(s);
                    }
                });
            });
        });
        </script>
    </form>
</div>

【问题讨论】：

“javascript 未定义”是什么意思？
在 html 中，我的 Id 和 Tipe 的值级联下拉列表未定义
调试的时候result里面的具体数据是什么？使用浏览器的调试工具来观察 AJAX 请求/响应，调试客户端代码，甚至只是将值记录到控制台。
我建议将LoadTipeC 中的数据放入一个变量中，并在使用Json() 发送它之前检查该变量，并确保它具有您期望的数据。此外，使用console.log(JSON.stringify(result, null, 2)) 获得result 中内容的可读表示，以确保它具有您认为应该具有的内容。

标签： javascript c# jquery asp.net-core-mvc

【解决方案1】：

经过我的测试，发现你的问题可能出在你的Js上。

尝试更改您的代码：

 for (var i = 0; i < result.length; i++)
{
  s += '<option value="' + result[i].Id + '">' + result[i].Tipe + '</option>';
}

到

for (var i = 0; i < result.length; i++)
{
  s += '<option value="' + result[i].id + '">' + result[i].tipe + '</option>';
}

id 和tipe 的第一个字母应为小写。

【讨论】：