0

データの配列から選択リストを動的に生成しており、アルファベットに基づいてオプション グループを追加したいと考えています。

例:データ

data = [
  ['bcde','21254'], ['abcd','1234'], ['abcde','23456'], ['bcdef','3232']
];

data.sort();アルファベットに基づいて並べ替えを処理し、データを調べて、それぞれに対して次のようなことを行います。

<option value="item[1]">item[0]</option>

しかし、私がやりたいのは、アイテムをアルファベットに基づいてソートした後、各アイテムの最初の文字を確認し、それに基づいてオプショングループを作成し、次のアイテムの文字が異なる場合は、新しい文字でラベル付けされた新しいオプショングループを作成することです

したがって、出力は次のようになります。

<select>
    <optgroup label="A">
        <option value="1234">abcd</option>
        <option value="23456">abcde</option>
    </optgroup>
    <optgroup label="B">
        <option value="21254">bcde</option>
        <option value="3232">bcdef</option>
    </optgroup>
</select>

誰でもこれを行うための最良の方法についてアドバイスをお願いできますか?ちなみに私はjqueryを使用しています.

編集、これは私の現在のコードです:

$.when( $.indexedDB("dbname").objectStore('employee').each(function(item){
  employeenames.push([item.value.name,item.value.id]);
}).then(function(){
  employeenames.sort();
  $.each(employeenames, function(index, item){
   employeenames[index] = '<option value="'+item[1]+'">'+item[0]+'</option>';
  });           
 })
).done(function() {
  $("#employeenameBox select").html(employeenames);
});
4

1 に答える 1

1

試す

data.sort();

var chars = {};
$.each(data, function (_, item) {
    var char = item[0].charAt(0).toUpperCase();
    if (!chars[char]) {
        chars[char] = $('<optgroup />', {
            label: char
        }).appendTo('select');
    }

    $('<option />', {
        text: item[0],
        value: item[0]
    }).appendTo(chars[char]);
});

デモ:フィドル

アップデート:

$.when($.indexedDB("dbname").objectStore('employee').each(function (item) {
    employeenames.push([item.value.name, item.value.id]);
}).then(function () {
    employeenames.sort();

    var chars = {};
    $.each(employeenames, function (_, item) {
        var char = item[0].charAt(0).toUpperCase();
        if (!chars[char]) {
            chars[char] = $('<optgroup />', {
                label: char
            }).appendTo('#employeenameBox select');
        }

        $('<option />', {
            text: item[0],
            value: item[0]
        }).appendTo(chars[char]);
    });
});
于 2013-11-07T00:43:43.787 に答える