Как добавить <option>из json результата - PullRequest
Новая
       50

Как добавить <option>из json результата

0 голосов
/ 14 апреля 2020

У меня есть класс Db, который называется trip, в котором должно быть более одного участника. Я хочу иметь кнопку, которая при каждом нажатии будет генерировать новый элемент select, содержащий список всех его друзей. Он должен иметь возможность выбирать более одного друга, но одному и тому же другу дважды.

У меня есть функция JsonResult в моем контроллере (MVC). У меня есть кнопка, которая при нажатии добавляет новый выбор с опцией для каждого друга. Я попытался сделать это: 

$('#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;
    }
});

Но это не будет работать. Кто-нибудь есть идеи, что будет работать? Спасибо!

1 Ответ

1 голос
/ 14 апреля 2020

Вы не можете использовать $.each таким образом. Посмотрите на API do c: jQuery .each () Do c Давайте предположим, что ваш вызов 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>
...