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

How to read object back from dropdown

本文关键字：对象 下拉列表      更新时间：2023-09-26

我正在使用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);
});

警报返回未定义的...

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

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

Writer 

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

Reader 

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

您可能想研究$.data()，似乎是这项工作的正确工具。

你可以使用 data（） 代替 val（）：

$("#cboAvailableSubscriptions").append($("<option></option>").data("itemKey", item).html(item.SubscriptionType));

并检索它：

$('#divChange').click(function () {
    var SubscriptionLookUp = {
        SubscriptionType: '',
        SubscriptionTypeId: '',
        UnitCost: '',
    };
    SubscriptionLookUp = $("#cboAvailableSubscriptions").find(":selected").data("itemKey");
    alert(SubscriptionLookUp.SubscriptionType);
});
相关文章：