将重复DataTables数据存储在选择下拉列表中

Store repeat DataTables data in select dropdown?

本文关键字：选择 下拉列表 存储 数据 DataTables      更新时间：2023-09-26

我需要一种优雅的方法来将重复数据存储在DataTables中的select下拉列表中。例如，我有两个问题，每个问题都可以有不同的答案。在这种情况下，问题1（keyno 1）有2个可能的答案，问题2（keyno 2）有3个可能的回答。在fiddle示例中，有5行（包含重复信息），但应该只有2行（每个注释记号一行）。我如何动态创建包含答案的下拉列表，并且只显示我的2行，就像for循环一样？我不确定。

http://jsfiddle.net/s827x/28/

var data = [
        {'keyno': '1', 'quest': 'Does a cat meow?', 'ans': 'yes'},
        {'keyno': '1', 'quest': 'Does a cat meow?', 'ans': 'no'},
        {'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'red'},
        {'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'yellow'},
        {'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'green'}
    ]
    $('#questtable').DataTable({
            "data": data,
            "columns": [
                { data: 'keyno' },
                { data: 'quest' },
                { data: 'ans' }
            ]
    });

我最终做的是为我的问题和答案创建一个数组，然后匹配凯恩斯。该表加载问题，在重新绘制时，在清除循环以匹配问题答案后添加下拉选项。：Dhttp://jsfiddle.net/s827x/37/

$('#questtable').DataTable({
        "data": quest,
        "columns": [
            { data: 'keyno' },
            { data: 'quest' },
            {
                data: 'ans',
                "mRender": function (data, type, full) {
                    return '<select id="'+full.keyno+'"></select>';
                }
            }
        ],
        "fnDrawCallback": function () {
            $('#questtable tbody tr').each(function () {
                for (var i = 0; i < ans.length; i++) {
                    if ($(this).find('td').eq(0).text() == ans[i].keyno) {
                        $(this).find('td').eq(2).find('select').append('<option value="' + ans[i].ans + '">' + ans[i].ans+ '</option>');
                    }
                }
            }); 
        }
    });
相关文章：