如何从 json 结果追加 <option>

Question

我有一个名为 trip 的 Db class，应该有不止一个参与者，我想要一个按钮，每次单击它都会生成一个新的 select 元素，其中包含一个<option> 他所有好友的列表。他应该可以选择不止一个朋友，但可以选择同一个朋友两次。

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

$('#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。查看文档：jQuery.each() API Doc 假设您的 getJSON 调用实际上 returns 正确的数据。你得到一个这样的数组

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

我强烈建议编写一些函数来附加您的 select 并添加选项，如下所示：

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>

如何从 json 结果追加 <option>

How to append <option> from json result

javascript

model-view-controller

each

select

append