如何<option>从 json 结果追加

Question

我有一个名为trip的Db类，它应该有不止一个参与者，我想有一个按钮，每次点击它都会生成一个新的选择元素，其中有一个他的所有朋友的<option>列表。他应该能够选择不止一个朋友，但对同一个朋友要选择两次。

我的控制器(MVC(中有一个JsonResult函数。我有一个按钮，当点击它时，它会为每个朋友添加新的选择选项。我试过这样做：

$('#participants').append($('<div class="col-md-2"></div>'))
.append($('<div class="input-group col-md-3"></div>')
.append($('<span class="input-group-addon"></span>').text("Username"))
.append($('<select name="userids" id="test" class="form-control"/>')
.each(r, function (key, value) {
$(this).append($('<option></option>').text(value.Text).val(value.Value))
})
)
).append($('<br>'));

在这个功能之前，我有以下代码行：

var r;
var ur = '@Url.Action("FetchFriends", "Trip")';
$.getJSON(ur, function (response) {
if (Object.keys(response).length) {
r = response;
}
});

但这行不通。有人知道什么会起作用吗？谢谢

Answer 1

不能那样使用$.each。查看doc:jQuery.each((API文档假设您的getJSON调用实际上返回了正确的数据。你会得到一个像这样的阵列

[
{text: 'Text 1', value: 1 },
{text: 'Text 2', value: 2 },
{text: 'Text 3', value: 3 }
];

我强烈建议编写一些函数来附加您的选择并添加选项，比如：

function addSelect( $element, addonText, selectName ) {
let $wrapper = $('<div class="col-md-2"></div>');
let $group = $('<div class="input-group col-md-3"></div>');
let $addon = $('<span class="input-group-addon"></span>').text(addonText);
let $select = $('<select name="'+ selectName +'" id="'+selectName+'" class="form-control"/>');
$group.append($addon).append($select);
$wrapper.append($group);
$element.append($wrapper);
}

和

function addOptions($select, text, value) {
$select.append($('<option></option>').text(text).val(value))
}

这样你就可以在getJSON方法中使用这些函数，比如：

$.getJSON(ur, function (response) {
if (Object.keys(response).length) {
$.each(response, function(key, value) {
addSelect($('#participants), 'username', 'userids');
let $select = $('#userids');
addOptions($select, value.text, value.value);
});
}
});

工作示例：

let r = [
	{text: 'Text 1', value: 1 },
{text: 'Text 2', value: 2 },
{text: 'Text 3', value: 3 }
];
function addSelect( $element, addonText, selectName, options ) {
	let $wrapper = $('<div class="col-md-2"></div>');
let $group = $('<div class="input-group col-md-3"></div>');
let $addon = $('<span class="input-group-addon"></span>').text(addonText);
let $select = $('<select name="'+ selectName +'" class="'+selectName+'" class="form-control"/>');
$group.append($addon).append($select);
$wrapper.append($group);
$element.append($wrapper);
$.each(options, function(key, value) {
		addOptions($select, value.text, value.value);
});
}
function addOptions($select, text, value) {
	$select.append($('<option></option>').text(text).val(value))
}
let clicked = 1;
$('#more').on('click', function() {
let currentId = clicked;
clicked++;
	addSelect( $('#participants'), 'username ' + currentId, currentId, r );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="participants">
</div>
<button id="more">
more
</button>