从数组填充下拉列表

Question

I am trying to populate an array list string so that I can then populate my drop downs.

I pass it an array string, and setup my array list like this:

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

I am then trying to populate my drop downs like this:

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

However, no items arrive in the drop down. Is what I am doing, possible?

Answer 1

Your object inside array was wrong.

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

---

OR Another 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]));
});

Answer 2

You have two problems here:

1.You array isn't valid:

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

What you have here is an array that holds invalid objects.
If you wanted an array of arrays it should of looked like this:

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

If you wanted a valid array of objects then you need to provide key properties.Something like this:

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

2.jquery each's callback doesnt hold val\\text but index\\object :

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

and therefore if we use the valid array then:

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

Here's a Fiddle .

Answer 3

When you do .html () that emptys the element and inputs the variable. You would want to use .append()...

Basically everytime it runs through that loop it resets the container.

Another thing is you can dynamically create a unordered list and append the list its that way and just have data tags to hold the values. It will give you more room to play with style and animation.

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

Thats just something really quick I daw this from my phone. I would plug it in jsfiddle and give it a try.