如何从下拉列表中读回对象
本文关键字:对象 下拉列表 | 更新日期: 2023-09-27 18:35:15
我正在使用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);
});