从阵列填充下拉列表

时间:2014-06-21 03:11:38

标签: 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));
            });
        }

但是,下拉菜单中没有任何物品到达。我正在做什么,可能吗?

3 个答案:

答案 0 :(得分:3)

你在数组中的对象是错误的。

<强> DEMO

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

或另一种方式 - 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 :(得分:1)

这里有两个问题:

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

这是Fiddle

答案 2 :(得分:0)

当你执行.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并尝试一下。