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

Posted 2023-05-09

【中文标题】使用 jquery tablesorter 插件，有一个下拉框选择一个项目

【英文标题】：Using jquery tablesorter plug-in, have a drop down box with an item selected

【发布时间】：2012-11-29 08:34:24

【问题描述】：

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

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

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

【问题讨论】：

您确定在您的第一个 for 循环中设置了默认值吗？您在输出中验证了吗？

是的，下拉列表已填充，我现在需要将数据库中的值设置为选定值。

不，我特别询问您尝试在for 循环中设置的默认值是否正确执行。之后查看输出时，是否看到带有selected="selected" 属性的<option> 标记？

no 没有选中的属性。

好的，如果我正确阅读了您的代码，那么您应该查看您的 for 循环代码。那应该至少设置一个默认值。否则，无论您做什么，都不会显示默认值。

【参考方案1】：

与其尝试在初始渲染期间添加selected 属性，我建议在之后运行它。像这样的：

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

【讨论】：

根据我当前的代码，我将如何将其放入表格中？

在你的成功函数中，但在追加之后。

我将该行放在我的 .trigger("update") 之前，它默认为下拉列表中的第一项。

我刚刚意识到，我认为我应该将 selectedValue 中的 data.defect_id[y] 更改为仅 data.defect[x]，因为从数据库中选择的项目称为缺陷。你觉得这对吗？

好的，所以我已经尝试了所有我能想到的方法，但它仍然不起作用。不过感谢您的尝试。

【参考方案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();
);

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

【参考方案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>');