Dropdown list option value and name with array javascript

Question

I'm having trouble with array in javascript. Is it possible to insert name and value in the same array

here is my code for array

press=new Array('T shirt black - $23','Sweater black - $34','Hoodie shirt black - $87');

and here is what I want to be the output

<option value="23">T shirt black - $23</option>

how can I put the "23" in the array?

Here is the full code. Sorry if I can't explain it

http://jsfiddle.net/V64hb/1/

http://pastebin.com/zyiQGHTS

Answer 1

You can use an array of objects:

press = [
    { desc: 'T shirt black',
      price: 23
    },
    { desc: 'Sweater black'
      price: 34
    },
    { desc: 'Hoodie shirt black'
      price: 87
    }
];

You can then access them with press[i].desc and press[i].price .

press.forEach(function(item) {
    $('#item').append($('<option/>', {
        value: item.price,
        text: item.desc+' - $'+item.price
    }));
});

Here's the full rewrite of your fiddle. I also got rid of eval() , by putting all the different arrays into an object keyed off the category value.

$(document).ready(function () {
    dropdowns = {
        web: [
            {desc: "1 Custom Web Page", price: 39},
            {desc: "5 Custom Web Pages", price: 190},
            {desc: "10 Custom Web Pages", price: 375},
            {desc: "20 Custom Web Pages", price: 710}
        ],
        art: [{desc: '300-word Article x 1', price: 7.00},
              {desc: '300-word Article x 5', price: 32.00},
              {desc: '400-word Article x 1', price: 8.00},
              {desc: '400-word Article x 5', price: 37.00},
              {desc: '500-word Article x 1', price: 9.00},
              {desc: '500-word Article x 5', price: 40.00},
              {desc: '700-word Article x 1', price: 12.00},
              {desc: '700-word Article x 5', price: 57.00},
              {desc: '1000-word Article x 1', price: 15.00},
              {desc: '1000-word Article x 5', price: 70.00}],
        blog: [{desc: '300-word Custom Blog x 1', price: 10},
               {desc: '400-word Custom Blog x 1', price: 12},
               {desc: '500-word Custom Blog x 1', price: 14},
               {desc: '300-word Custom Blog x 5', price: 47},
               {desc: '400-word Custom Blog x 5', price: 55},
               {desc: '500-word Custom Blog x 5', price: 63}
              ],
        press: [{desc: '300-word Custom Press Release', price: 27},
                {desc: '400-word Custom Press Release', price: 37},
                {desc: '500-word Custom Press Release', price: 47}
               ]
    }

    populateSelect();

    $(function () {
        $('#cat').change(populateSelect);
    });

    function populateSelect() {
        var cat = $('#cat').val();
        $('#item').empty();

        dropdowns[cat].forEach(function(item) {
            $('#item').append($('<option/>', {
                value: item.price,
                text: item.desc+' = $'+item.price
            }));
        });
    }

});

DEMO

Answer 2

The simplest way is for me, spliteach entry uing entry.split('-')[1]; . After that the entry will be $23 . Trim it (using entry.trim() , and get the substring from the second character. This will remove the $.

Answer 3

You could potentially use an array of objects (PHP uses associative arrays for this; these are also referred to as hash maps, and by many other names in many other different languages):

Here's the jsfiddle :

var clothing = [

    {
         type: 't-shirt',
         color: 'black',
         price: 23
    },

    {
         type: 'sweater',
         color: 'black',
         price: 34
    }

]

var i, len = clothing.length;

for (i=0; i<len; i++) {
    var obj = clothing[i];

    console.log('object at index ' + i + ' of clothing array - ');

    for (key in obj) {
        console.log(key + ':' + obj[key]);
    }
}

OUTPUT:

object at index 0 of clothing array -
type:t-shirt
color:black
price:23

object at index 1 of clothing array -
type:sweater
color:black
price:34

Answer 4

you can use split function if array string in same as array and only you want output.

clothing=new Array('T shirt black - $23','Sweater black - $34','Hoodie shirt black - $87');


for (i=0; i<clothing.length; i++) {
    var a = clothing[i].split(" - ");
    $('#item').append('<option value = "'+a[1]+'">'+a[0]+'</option>');
}

http://jsfiddle.net/nilesh026/6qg8C/1/