jQuery ajax 显示 [object Object]答案

【问题标题】：Jquery ajax displays [object Object]jQuery ajax 显示 [object Object]
【发布时间】：2014-12-22 15:28:34
【问题描述】：

我基本上有 2 个下拉列表和 2 个标签。

第一个下拉列表是类别选择，第二个列表根据类别动态加载项目。

到目前为止一切都很好。

在标签上我试图显示 ItemName 和 ItemDescription。

ItemName 显示正常，但是当涉及到 ItemDescription 时，由于某种原因它显示 [object Object]。

我在控制台中注意到 ItemDescription 信息已正确发布，您能帮我找到正确显示它的方法吗？

jquery：

<script type="text/javascript">
        $('#ItemsDivId').hide();
        $('#SubmitID').hide();
        $('#ItemTypeID').on('change', function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetItemTypeForm")',
                data: { itemTypeId: $('#ItemTypeID').val() },
            success: function (results) {
                var options = $('#ItemsID');
                options.empty();
                options.append($('<option />').val(null).text("- Select an Item -"));
                $.each(results, function () {
                    options.append($('<option />').val(this.ItemsID).text(this.Value));                 

                });             

                $('#ItemsDivId').show();                                         

                $('#ItemsID').change(function (results) {

                    $('#SubmitID').show();

                    $('#ItemName').text($("#ItemsID option:selected").text());
                    $('#ItemDescription').text($("#ItemsID option:selected").text(this.ItemDescription));
                });

            }
            });


    });
</script>

json：

 [HttpPost]
        public JsonResult GetItemTypeForm(string itemTypeId)
        {
            //pseudo code
            var data = from s in db.Items
                       where s.ItemType.ItemTypeName == itemTypeId && s.ItemActive == true
                       select new { Value = s.ItemName, ItemsID = s.ItemId ,ItemDescription = s.ItemDescription };


            return Json(data);
        }

【问题讨论】：

标签： javascript jquery asp.net ajax json

【解决方案1】：

$("#ItemsID option:selected").text(this.ItemDescription); 更改文本并将元素作为对象返回。您可以使用 jquery data() 函数将每个项目的描述保存为数据。然后在change事件中使用它..

试着改成这个。

<script type="text/javascript">
        $('#ItemsDivId').hide();
        $('#SubmitID').hide();
        $('#ItemTypeID').on('change', function () {
        $.ajax({
                type: 'POST',
                url: '@Url.Action("GetItemTypeForm")',
                data: { itemTypeId: $('#ItemTypeID').val() },
            success: function (results) {
                var options = $('#ItemsID');
                options.empty();
                options.append($('<option />').val(null).text("- Select an Item -"));
                options.data('description','');
                $.each(results, function () {
                    options.append($('<option />').val(this.ItemsID).text(this.Value));                 
                    options.data('description',this.ItemDescription);
                });             

                $('#ItemsDivId').show();                                         

                $('#ItemsID').change(function (results) {
                    $('#SubmitID').show();
                    $('#ItemName').text($("#ItemsID option:selected").text());
                    $('#ItemDescription').text($("#ItemsID option:selected").data('description'));
                });

            }
         });
    });
</script>

【讨论】：

不，它不起作用，ItemDescription 标签给了我项目名称而不是项目描述
是的，控制台中的帖子有 3 个元素及其信息：Value、ItemId 和 ItemDescription
抱歉耽搁了，刚刚检查了您的代码，但在 ItemDescription 的标签上没有显示任何内容

【解决方案2】：

我玩了一些，我找到了解决方案：

<script type="text/javascript">
        $('#ItemsDivId').hide();
        $('#SubmitID').hide();
        $('#ItemTypeID').on('change', function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetItemTypeForm")',
                data: { itemTypeId: $('#ItemTypeID').val() },
                success: function (results) {
                    var options = $('#ItemsID');
                    options.empty();
                    options.append($('<option />').val(null).text("- Select an Item -"));
                    options.data('description', '');
                    $.each(results, function () {
                        options.append($('<option />').val(this.ItemsID).text(this.Value).data('ItemDescription', this.ItemDescription));                   
                    });

                    $('#ItemsDivId').show();

                    $('#ItemsID').change(function (results) {
                        $('#SubmitID').show();
                        $('#ItemName').text($("#ItemsID option:selected").text());
                        $('#ItemDescription').text($("#ItemsID option:selected").data('ItemDescription'));
                    });

                }
        });
        });
</script>

也非常感谢 Sampath Liyanage 带领我走向正确的方向 :)

【讨论】：