jQuery to change dropdown with AJAX

Question

I need a radio button to change a dropdown and have most if it working just not sure about a few things. I want to have CreativeID as the ID and CreativeName as the name. Here's my AJAX:

$('input[name=creativeType]').change(function(){
        $.ajax({
            url: '/app/components/MailingsReport.cfc',
            //POST method is used
            type: "POST",
            //pass the data 
            data: {
                method: "getCreative",
                CreativeType: $('input[name=creativeType]:checked').val(),
                datasource: "shopping_cart"
                 },
            dataType: "xml",
            //contentType: "application/text; charset=utf-8",
            success: function(xml){
                $('#creative option').remove();
                    $(xml).find('number').each(function()
                    {

$("#creative").append('<option value="' + $(this).text() + '">' + $(this).find('CREATIVENAME').text() + '<\/option>');

                    });                
            }
        });

Here's my return data:

<wddxPacket version='1.0'><header/><data><recordset rowCount='3' fieldNames='CREATIVEID,CREATIVENAME' type='coldfusion.sql.QueryTable'><field name='CREATIVEID'><number>52.0</number><number>65.0</number><number>77.0</number></field><field name='CREATIVENAME'><string>Product One</string><string>Product Two</string><string>Product Three</string></field></recordset></data></wddxPacket>

My Question: I just have no idea how to populate the dropdown so the ID is the value AND the product name shows between the option tags. Any help on this would be appreciated!

Answer 1

var numbers = $(xml).find('number');
var strings = $(xml).find('string');
for (var i = 0; i < numbers.length; i++) {
    $("#creative").append('<option value="' + numbers[i].innerHTML + '">' + strings[i].innerHTML + '<\/option>');
}