Question

This block of code is getting data from a csv, putting it into JSON and displaying to the user. Additionally, I am trying to create an object attribute and assign its value based on the selected value, But I am getting deliveryMethod - undefined.

$(document).ready(function() {
$.getJSON('CSV.php', function(data) {

    var prevCardCode = '';
    var newDiv; var NewDiv2;
    var DeliveryMethod;

    $.each(data, function(index, element) {
        var XMLObject = jQuery.extend({}, element);

        if (element['CardCode'] != prevCardCode) {
            newDiv = $('<div/>').addClass('row').appendTo('#showdata');
            $('<div class="sum_field">' + 'Total: ' + element['payment_sum'] + '</div>').appendTo(newDiv);

                $('<div class="options">Delivery Method: <select name="Delivery_Method" id="Delivery_Method"><option value="100" selected="selected">US Mail</option><option value="300">Foreign Mail</option></select></div>').appendTo(newDiv);

                $('select#Delivery_Method').change(function(){
                    DeliveryMethod = $(this).val(); 
                });

                    XMLObject.deliveryMethod = DeliveryMethod;
                    console.log(XMLObject);

        }

        newDiv2 = $('<div/>').addClass('sub_row').appendTo(newDiv);

        prevCardCode = element['CardCode'];

        $.each(element, function(key, value) {

            switch (key) {
                case 'InvKey':
                break;

                default:

                   $('<div class="field">' + value + '</div>').appendTo(newDiv2);
                   break;
            }
          });
      });
   });
});

Answer 1

You need to declare DeliveryMethod outside the change function:

var XMLObject = {};
var DeliveryMethod;

$('<div class="options">Delivery: <select id="Delivery_Method"><option value="100" selected="selected">US Mail</option><option value="300">Foreign Mail</option><option value="400">UPS Priority - 10am guarantee</option></select></div>').appendTo(newDiv);

 $('#Delivery_Method').change(function(){
   DeliveryMethod = $('select#Delivery_Method').val(); 
   });

    XMLObject.deliveryMethod = DeliveryMethod;
    console.log(XMLObject);