Question

I have created a table that allows a user to edit/correct the data. The table populates fine, and in order to make this table as easy to use as possible. I have added drop down boxes that they can select from when they need to change any information.

JS file is:

for(y=0;y<data.defect2.length; y++) {
    myselectoptions += '<option value="'+data.defect_id[y]+'"' +
        (data.defect_id[y]==data.defect[y] ? ' selected="selected"' : '') + 
        '>'+data.defect2[y]+'</option>';
}

if (data.isbn2 === null) {
    $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>');
} else {
    for(var x=0;x<data.isbn2.length;x++) {
        $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+
        '</td><td id="tableQuantity">'+data.quantity[x]+
        '</td><td><select id="tableDefect">'+myselectoptions+//'" selected="'+data.defect[x]+'">'+myselectoptions2+
        '"</select></td><td><select id="tableSource">'+sourceoptions+
        '"</select></td><td><select id="tableFeature">'+featureoptions+
        '"</select></td><td><select id="tableWater">'+wateroptions+
        '"</select></td><td><select id="tableLocation">'+locationoptions+
        '"</select></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+
        '"/></td><td><select id="tableBookType">'+bookoptions+
        '"</select></td><td><select id="tableCreatedBy">'+useroptions+
        '"</select></td><td><select id="tableModifiedBy">'+useroptions+
        '"</select></td></tr>');
    }

    $("#inventoryUpdate").trigger("update");
}

This all works, except that I can’t have it default to the selected item from the database query. The item that is selected is the value of the very last item in the table.
Any ideas on how to accomplish this or is it impossible to do?

Answer 1

Well it took some doing but I finally figured it out. I needed to put the

for(y=0;y<data.defect2.length; y++) {
     myselectoptions += '<option value="'+data.defect_id[y]+'"' +
         (data.defect_id[y]==data.defect[x] ? ' selected="selected"' : '') + '>'+data.defect2[y]+'</option>';
} 

inside of the

if(data.isbn2 === null){
    $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>');
} else {
    for(var x=0;x<data.isbn2.length;x++) {
        $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+
            '</td><td id="tableQuantity">'+data.quantity[x]+
            '</td><td><select id="tableDefect">'+myselectoptions+//'" selected="'+data.defect[x]+'">'+myselectoptions2+
            '"</select></td><td><select id="tableSource">'+sourceoptions+
            '"</select></td><td><select id="tableFeature">'+featureoptions+
            '"</select></td><td><select id="tableWater">'+wateroptions+
            '"</select></td><td><select id="tableLocation">'+locationoptions+
            '"</select></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+
            '"/></td><td><select id="tableBookType">'+bookoptions+
            '"</select></td><td><select id="tableCreatedBy">'+useroptions+
            '"</select></td><td><select id="tableModifiedBy">'+useroptions+
            '"</select></td></tr>');
    }
}

so the final product looks like this:

if(data.isbn2 === null){
    $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>');
} else {
    for(var x=0;x<data.isbn2.length;x++) { 
        for(y=0;y<data.defect2.length; y++) {
            myselectoptions += '<option value="'+data.defect_id[y]+'"' +
                (data.defect_id[y]==data.defect[x] ? ' selected="selected"' : '') +
                '>'+data.defect2[y]+'</option>';
        } 

        $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+
            '</td><td id="tableQuantity">'+data.quantity[x]+
            '</td><td><select id="tableDefect">'+myselectoptions+//'" selected="'+data.defect[x]+'">'+myselectoptions2+
            '"</select></td><td><select id="tableSource">'+sourceoptions+
            '"</select></td><td><select id="tableFeature">'+featureoptions+
            '"</select></td><td><select id="tableWater">'+wateroptions+
            '"</select></td><td><select id="tableLocation">'+locationoptions+
            '"</select></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+
            '"/></td><td><select id="tableBookType">'+bookoptions+
            '"</select></td><td><select id="tableCreatedBy">'+useroptions+
            '"</select></td><td><select id="tableModifiedBy">'+useroptions+
            '"</select></td></tr>');
    }
}