javascript - 如何从下拉列表中读回对象

Question

我正在使用 JavaScript。

我调用 api 来获取类对象列表 (asp.net mvc c#)。

我在 JavaScript 中枚举了这个列表，并在我的下拉列表中设置和添加了项目。

当我单击一个按钮时，我想获取所选项目并解析/读取/回放类对象，但出现未定义的错误。

这是我的模型:

public  class SubscriptionLookUp
{
    public string SubscriptionType { get; set; }
    public int SubscriptionTypeId { get; set; }
    public double UnitCost { get; set; }
    public string ErrorMessage { get; set; }
}

这是我的 ajax 调用:

$.ajax({
    url: "https://mydomain/SubscriptionLookUp?currentSubscription"
    type: "GET",
    crossDomain: true,
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function (data) {
          $("#cboAvailableSubscriptions").empty();
        $("#cboAvailableSubscriptions").append($("<option></option>").val('').html('Please Select'));
        $.each(data, function (key, item) {

            if (item.ErrorMessage !== '' && item.ErrorMessage!==null) {
                $('#divError').html('Server Error');
                return;
            }
            $("#cboAvailableSubscriptions").append($("<option></option>").val(item).html(item.SubscriptionType));
        })                                    },
    error: function (jqXHR, textStatus, errorThrown) {
          $("#divError").html('Server Error');
    }
});

填充得很好，这是我读回对象的最后一点:

$('#divChange').click(function () {

    var SubscriptionLookUp = {
        SubscriptionType: '',
        SubscriptionTypeId: '',
        UnitCost: '',
    };
    SubscriptionLookUp = $("#cboAvailableSubscriptions").val();

    alert(SubscriptionLookUp.SubscriptionType);
});

警报返回未定义...

Answer 1

$.val() 使用 Object.prototype.toString.call(value)，它将您的 item 转换为字符串 [Object object](您可以通过查看生成的 html 的源代码来了解这一点)。因此，当尝试读取属性 SubscriptionType 时，JavaScript 引用的是 String.prototype，而不是您的 item - 因此 undefined.

只需对您的代码进行少量更改，您就可以使用 JSON.stringify 和 JSON.parse:

作者

$("#cboAvailableSubscriptions").append(
  $("<option></option>").val(JSON.stringify(item))
                        .html(item.SubscriptionType)
);

阅读器

SubscriptionLookUp = JSON.parse($("#cboAvailableSubscriptions").val());

您可能需要查看 $.data() ，似乎是完成这项工作的正确工具。