Question

我基本上有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);
        }

Answer 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>

Answer 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带领我走向正确的方向：）

Jquery ajax显示[object Object]

2 个答案: