Заполнить выпадающий список из массива

#javascript #asp.net-mvc #twitter-bootstrap

#javascript #asp.net-mvc #twitter-bootstrap

Вопрос:

Я пытаюсь заполнить строку списка массива, чтобы затем я мог заполнить свои выпадающие списки.

Я передаю ему строку массива и настраиваю свой список массивов следующим образом:

  var thirdParties = [{'7-Eleven', '114'},{'A Mart All Sports', '41'},{'A.J Coory Dental', '140'}];
 

Затем я пытаюсь заполнить свои выпадающие списки следующим образом:

 if (id == 1) // Payment
        {
            //alert('Payment');
            $('#SourceEntityId').empty();
            $.each(accounts, function (val, text) {
                $('#SourceEntityId').append($('<option></option>').val(val).html(text));
            });

            $('#DestinationEntityId').empty();
            $.each(thirdParties, function (val, text) {
                $('#DestinationEntityId').append($('<option></option>').val(val).html(text));
            });
        }


        if (id == 2) // deposit
        {
            //alert('Deposit');
            $('#SourceEntityId').empty();
            $.each(thirdParties, function (val, text) {
                $('#SourceEntityId').append($('<option></option>').val(val).html(text));
            });

            $('#DestinationEntityId').empty();
            $.each(accounts, function (val, text) {
                $('#DestinationEntityId').append($('<option></option>').val(val).html(text));
            });
        }
 

Однако в выпадающем списке нет элементов. Возможно ли то, что я делаю?

Ответ №1:

Ваш объект внутри массива был неправильным.

ДЕМОНСТРАЦИЯ

 var thirdParties = [{
    text: '7-Eleven',
    value: '114'
}, {
    text: 'A Mart All Sports',
    value: '41'
}, {
    text: 'A.J Coory Dental',
    value: '140'
}];

$('#SourceEntityId').empty();

$.each(thirdParties, function () {
    console.log(this);
    var thirdParty = this;
    $('#SourceEntityId').append($('<option></option>')
         .val(thirdParty.value).html(thirdParty.text));
});
 

ИЛИ другой способ — ДЕМО

 var thirdParties = [['7-Eleven','114'],['A Mart All Sports','41'],['A.J Coory Dental','140']];

$('#SourceEntityId').empty();

$.each(thirdParties, function () {

    var thirdParty = this;
    console.log(thirdParty[1]);
    $('#SourceEntityId').append($('<option></option>')
        .val(thirdParty[1]).html(thirdParty[0]));
});
 

Комментарии:

1. Идеально! Спасибо! Выбрал 2-й вариант, чтобы мой массив был меньше (меньше текста, из-за меньшего количества повторяющихся имен каждого «поля». Спасибо.

Ответ №2:

Здесь у вас две проблемы:

1. Ваш массив недействителен:

 [{'7-Eleven', '114'},{'A Mart All Sports', '41'},{'A.J Coory Dental', '140'}];
 

То, что у вас здесь есть, — это массив, содержащий недопустимые объекты.
Если вам нужен массив массивов, он должен выглядеть следующим образом:

 [['7-Eleven', '114'],['A Mart All Sports', '41'],['A.J Coory Dental', '140']];
 

Если вам нужен действительный массив объектов, вам необходимо предоставить ключевые свойства.Что — то вроде этого:

 [{text:'7-Eleven', value:'114'},{text:'A Mart All Sports', value:'41'},{text:'A.J Coory Dental', value:'140'}];
 

2. обратный вызов каждого jquery не выполняется, valtext но indexobject :

 $.each(accounts, function (idx, obj) {});
 

и поэтому, если мы используем допустимый массив, то:

 var arr = [{text:'7-Eleven', value:'114'},{text:'A Mart All Sports', value:'41'},{text:'A.J Coory Dental', value:'140'}];

$.each(arr, function (idx, obj) {
      $('#SourceEntityId').append($('<option></option>').val(obj.value).html(obj.text));
});
 

Вот скрипка.

Ответ №3:

Когда вы выполняете .html (), который очищает элемент и вводит переменную. Вы хотели бы использовать .append() …

По сути, каждый раз, когда он проходит через этот цикл, он сбрасывает контейнер.

Другое дело, что вы можете динамически создавать неупорядоченный список и добавлять список таким образом, и просто иметь теги данных для хранения значений. Это даст вам больше возможностей для игры со стилем и анимацией.

 var list_container = $("<ul/>").addClass ('list');



$('whatever container you decide this is going into').append(list_container);

$.each(thirdparties,  function (index){
     var li = $("<li/>").addClass('classname').attr('data-value',thirdparties[index].value);
     $('.list').append(li);
     $('li[data-value="' thirdparties[index].value '"]).html(thirdparties [index].text);
});
 

Это просто что-то очень быстрое, я делаю это со своего телефона. Я бы подключил его к jsfiddle и попробовал.