Ajax 使用选项组填充 SelectList
Ajax populate SelectList with Option Groups
我可以使用 Ajax 使用选项组填充 SelectList 吗?
我已经正确编写了添加项目的代码,但不确定如何添加选项组。
这是我的 Ajax 有效代码:
var category = $(this).val();
$.ajax({
type: "POST",
async: true,
url: '/TestController/Test',
data: {
'category': category
},
dataType: "json",
error: function () {
},
success: function (data) {
$("#fileId").empty();
$.each(data, function () {
$("#fileId").append($("<option />").val(this.Value).text(this.Text));
});
}
});
调用的函数如下:
public async Task<string> Test(string category)
{
var items = new List<SelectListItem>();
items.Add(new SelectListItem() { Value = "1", Text = "Item 1" });
items.Add(new SelectListItem() { Value = "2", Text = "Item 2" });
items.Add(new SelectListItem() { Value = "3", Text = "Item 3" });
return new JavaScriptSerializer().Serialize(items);
}
我现在想将选项组添加到 SelectList。
这是我正在调用的新函数,带有选项组:
public async Task<string> Test(string category)
{
var Group1 = new SelectListGroup() { Name = "Group 1" };
var Group2 = new SelectListGroup() { Name = "Group 2" };
var items = new List<SelectListItem>();
items.Add(new SelectListItem() { Value = "1", Text = "Item 1", Group = Group1 });
items.Add(new SelectListItem() { Value = "2", Text = "Item 2", Group = Group2 });
items.Add(new SelectListItem() { Value = "3", Text = "Item 3", Group = Group2 });
return new JavaScriptSerializer().Serialize(items);
}
如何使用与第一个示例相同的方式填充 SelectList,但使用选项组?
提前致谢。
编辑
我需要像下图一样缩进组项目(忽略项目和组名称):
这是需要输出的正确HTML代码:
<optgroup label="Public">
<option value="1">Green - test.png</option>
<option value="3">Yellow - test.png</option>
</optgroup>
<optgroup label="User">
<option value="5">Yellow534x300.png</option>
</optgroup>
</select>
@Rory McCrossan:您的代码输出如下:
<optgroup label="Group 1"></optgroup><option value="1">Item 1</option><optgroup label="Group 2"></optgroup><option value="2">Item 2</option><option value="3">Item 3</option></select>
如果你存储了之前的组名,当值改变时你可以添加一个新的组。像这样:
success: function(data) {
$("#fileId").empty();
var $prevGroup, prevGroupName;
$.each(data, function () {
if (prevGroupName != this.Group.Name) {
$prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#fileId');
}
$("<option />").val(this.Value).text(this.Text).appendTo($prevGroup);
prevGroupName = this.Group.Name;
});
});
试试这个,我只是清空语句下的 html 并附加新的。
var category = $(this).val();
$.ajax({
type: "POST",
async: true,
url: '/TestController/Test',
data: {
'category': category
},
dataType: "json",
error: function () {
},
success: function (data) {
$("select#fileId").html('');
$.each(data, function () {
$("select#fileId").append('<option value="' + this.Value + '">'+this.Text+'</option>');
});
}
});
您可以将数据分组,然后在您的标记中创建 optgroups:
success: function (data) {
var newData = {};
$.each(data, function () {
if (newData[this.Group.Name]) {
newData[this.Group.Name].push(this);
} else {
newData[this.Group.Name] = [this];
}
});
$("#fileId").empty();
for (var item in newData) {
var group = $("#fileId").append($("<optgroup label='" + item + "' />");
$.each(newData[item], function () {
group.append($("<option />").val(this.Value).text(this.Text));
});
}
}
我可以使用 Ajax 使用选项组填充 SelectList 吗?
我已经正确编写了添加项目的代码,但不确定如何添加选项组。
这是我的 Ajax 有效代码:
var category = $(this).val();
$.ajax({
type: "POST",
async: true,
url: '/TestController/Test',
data: {
'category': category
},
dataType: "json",
error: function () {
},
success: function (data) {
$("#fileId").empty();
$.each(data, function () {
$("#fileId").append($("<option />").val(this.Value).text(this.Text));
});
}
});
调用的函数如下:
public async Task<string> Test(string category)
{
var items = new List<SelectListItem>();
items.Add(new SelectListItem() { Value = "1", Text = "Item 1" });
items.Add(new SelectListItem() { Value = "2", Text = "Item 2" });
items.Add(new SelectListItem() { Value = "3", Text = "Item 3" });
return new JavaScriptSerializer().Serialize(items);
}
我现在想将选项组添加到 SelectList。
这是我正在调用的新函数,带有选项组:
public async Task<string> Test(string category)
{
var Group1 = new SelectListGroup() { Name = "Group 1" };
var Group2 = new SelectListGroup() { Name = "Group 2" };
var items = new List<SelectListItem>();
items.Add(new SelectListItem() { Value = "1", Text = "Item 1", Group = Group1 });
items.Add(new SelectListItem() { Value = "2", Text = "Item 2", Group = Group2 });
items.Add(new SelectListItem() { Value = "3", Text = "Item 3", Group = Group2 });
return new JavaScriptSerializer().Serialize(items);
}
如何使用与第一个示例相同的方式填充 SelectList,但使用选项组?
提前致谢。
编辑
我需要像下图一样缩进组项目(忽略项目和组名称):
这是需要输出的正确HTML代码:
<optgroup label="Public">
<option value="1">Green - test.png</option>
<option value="3">Yellow - test.png</option>
</optgroup>
<optgroup label="User">
<option value="5">Yellow534x300.png</option>
</optgroup>
</select>
@Rory McCrossan:您的代码输出如下:
<optgroup label="Group 1"></optgroup><option value="1">Item 1</option><optgroup label="Group 2"></optgroup><option value="2">Item 2</option><option value="3">Item 3</option></select>
如果你存储了之前的组名,当值改变时你可以添加一个新的组。像这样:
success: function(data) {
$("#fileId").empty();
var $prevGroup, prevGroupName;
$.each(data, function () {
if (prevGroupName != this.Group.Name) {
$prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#fileId');
}
$("<option />").val(this.Value).text(this.Text).appendTo($prevGroup);
prevGroupName = this.Group.Name;
});
});
试试这个,我只是清空语句下的 html 并附加新的。
var category = $(this).val();
$.ajax({
type: "POST",
async: true,
url: '/TestController/Test',
data: {
'category': category
},
dataType: "json",
error: function () {
},
success: function (data) {
$("select#fileId").html('');
$.each(data, function () {
$("select#fileId").append('<option value="' + this.Value + '">'+this.Text+'</option>');
});
}
});
您可以将数据分组,然后在您的标记中创建 optgroups:
success: function (data) {
var newData = {};
$.each(data, function () {
if (newData[this.Group.Name]) {
newData[this.Group.Name].push(this);
} else {
newData[this.Group.Name] = [this];
}
});
$("#fileId").empty();
for (var item in newData) {
var group = $("#fileId").append($("<optgroup label='" + item + "' />");
$.each(newData[item], function () {
group.append($("<option />").val(this.Value).text(this.Text));
});
}
}