从数组填充下拉列表

Populate Drop Down from Array

本文关键字：下拉列表 填充 数组      更新时间：2023-09-26

我正在尝试填充一个数组列表字符串，以便我可以填充我的下拉列表。

传递给它一个数组字符串，并像这样设置数组列表:

 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));
            });
        }

但是，下拉列表中没有到货项。我所做的是可能的吗?

数组中的对象错误。

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));
});

OR other Way - DEMO

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。你的数组无效:

[{'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的每个回调不保持val'text ，但 index'object:

$.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));
});

当您执行。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);
});

这是我从手机上看到的。我会把它插进去，试一试。

相关文章：