Question

我创建了一个允许用户编辑/更正数据的表。该表填充正常，以使该表尽可能易于使用。我添加了下拉框，当他们需要更改任何信息时，他们可以从中选择。

JS文件是：

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");
}

这一切都有效，除了我不能将它默认为数据库查询中的选定项。选择的项目是表格中最后一项的值。有关如何实现这一目标的任何想法，还是不可能做到？

Answer 1

我建议不要在初始渲染过程中尝试添加selected属性。像这样：

var selectedValue = 'option[value="'+data.defect_id[y]+'"]';
$('#tableDefect').find(selectedValue).attr("selected",true).end();

Answer 2

您可以使用类似于以下代码设置值：

工作示例： http://jsfiddle.net/fwsyL/

<强> HTML

<select id="Options">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option value="4">Value 4</option>
    <option value="5">Value 5</option>
</select>
<br />
<input id="TextSet" type="text" value="" style="width:50px;"/> 
<input id="ButtonSet" type="button" value="Set" style="width:50px;"/>

<强> JQuery的

$('#ButtonSet').click(function() {
    $('#Options option[value="' + $('#TextSet').val() + '"]').attr("selected",true).end();
});

这只是您可能解决方案的另一种方式。一旦我得到更多信息。从你我可以提供特定于你的代码的答案。

Answer 3

嗯，这需要一些，但我终于明白了。

我需要

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>';
}

里面的

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>');
    }
}

所以最终产品看起来像这样：

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>');
    }
}

使用jquery tablesorter插件，有一个选中项目的下拉框

3 个答案: