Question

I have a table that generates perfectly using php, ajax and the tablesorter plugin. I now would like to make a few of the input fields into dropdown boxes so the user can select an option if it needs to be changed. This all will then need to be saved to a database. Here is what I have so far:

    $('#getInfo').live('click', function() {
//clear table before search
    $("#inventoryUpdate tbody tr").remove();
    $('#messageInv').html('Please be patient, this might take a minute');
$.ajax({
    type: "POST",
    async: true,
    url: "getInventory.php",
    dataType: "json",
    data: ({skuStart: $("#startSkuRange").val(), skuEnd: $("#endSkuRange").val(), processDate: $("#processDate").val(),
           source: $("#source").val()}),
    success: function(data){
        $('#messageInv').hide(); 
        //console.log(data);
                    var myselectoptions = ''; 
        if(data.isbn2 === null){
                $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>');
            }else{
        for(var x=0;x<data.isbn2.length;x++)
                {
          $.each(data.defect2[x], function(index, val)
            {
             myselectoptions += '<option value="'+data.defect2[x][index].option+'">'+data.defect2[x][index].option+'</option>';
            });
        $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+
                 '</td><td><input type="text" id="tableQuantity" value="'+data.quantity[x]+
                 '"/></td><td><select id="tableDefect">'+myselectoptions+
                 '"</select></td><td><input type="text" id="tableSource" value="'+data.source[x]+
                 '"/></td><td><input type="text" id="tableFeature" value="'+data.feature[x]+
                 '"/></td><td><input type="text"  id="tableLocation" value="'+data.location[x]+
                '"/></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+
                '"/></td><td><input type="text" id="tableBookType" value="'+data.booktype[x]+
                '"/></td><td><input type="text" id="tableCreatedBy" value="'+data.created[x]+
                '"/></td><td><input type="text" id="tableModifiedBy" value="'+data.modified[x]+
                '"/></td></tr>');
                                    }
        $("#inventoryUpdate").trigger("update");
            } // end of else statement
    } // end of success function
});// end of ajax call
}); // end of inventory update function

I would like to have the tableDefect and tableFeature inputs become drop down boxes that are populated dynamically, and default to the current info from the database. For example, if the defect from the database is “rip in dust jacket” that would be the option that is selected, but I also need the rest of the options (no defects, water damage etc.) from the database to be available if it needs to be changed. I would think that I need to change the input type to a select, but then how do I go about populating it? Would that require another call to the database for the information?
Is this even possible to do with this plug-in?
EDIT: I have pasted in the new code based on the answer below, I now am getting 19 “options” (it just says undefined not the actual value returned) for the first record, 38 for the second etc. There should only be 19 options.

Answer 1

If I am reading you correctly just replace <input type="text"......> with
<select id=...><option>...</option></select>

As far as populating the selects dynamically that can be handled a few different ways. With your ajax you would get the select values maybe by changing your existing

data.defect[x] into a multidimensional object so instead of it being just a string you would output an array that will get converted to JSON on your backend so your object would look like

defect[{"option":"value"},{"option":"value"},{"option":"value"},{"option":"value"}]

Where when your building your table in the succession part you would loop over that object. You would essentially do the same as you do now.. except. your select would look like

var myselectoptions = '';
   $.each(data.defect[x], function(index, val)
          {
             myselectoptions += '<option value="'+data.source[x][index].option+'">'+data.source[x][index].option+'</option>';
          });
'"/></td><td><select id="tableDefect">'+myselectoptions+'....

now this is pure concept, I haven’t tested it, and its likely to need some tweaking to fit your needs specifically but this is the core concept of one of a few ways you can handle what you want done, that fits into what you are currently doing, without having to alter it too much.