0

我有一个使用 php、ajax 和 tablesorter 插件完美生成的表。我现在想将一些输入字段放入下拉框中，以便用户可以在需要更改时选择一个选项。然后，这一切都需要保存到数据库中。这是我到目前为止所拥有的：

    $('#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

我想让 tableDefect 和 tableFeature 输入成为动态填充的下拉框，并默认为数据库中的当前信息。例如，如果数据库中的缺陷是“防尘套撕裂”，这将是选择的选项，但我还需要数据库中的其余选项（无缺陷、水损坏等）在以下情况下可用它需要改变。我认为我需要将输入类型更改为选择，但是我该如何填充它呢？这是否需要再次调用数据库以获取信息？这甚至可以用这个插件来做吗？
编辑：我已经根据下面的答案粘贴了新代码，我现在得到了第一条记录的 19 个“选项”（它只是说未定义而不是返回的实际值），第二条记录有 38 个等等。应该只有 19选项。

4

1 回答 1

2

如果我没看错，只需替换<input type="text"......>为 <select id=...><option>...</option></select>

至于动态填充选择，可以通过几种不同的方式进行处理。使用您的 ajax，您可能会通过更改现有的

data.defect[x]到一个多维对象中，而不是它只是一个字符串，您将输出一个数组，该数组将在您的后端转换为 JSON，因此您的对象看起来像

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

当您在继承部分构建表格时，您将在该对象上循环。你基本上会做和现在一样的事情……除了。你的选择看起来像

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+'....

现在这是纯粹的概念，我还没有测试过，它可能需要一些调整来满足你的具体需求，但这是你可以处理你想做的事情的几种方法之一的核心概念，它适合你目前正在做，而不必改变太多。

于 2012-08-15T14:58:52.320 回答