0

複数選択が可能で、検索機能があり、「すべて選択」オプションがあるドロップダウン メニューを作成するために、bootstrap-multiselect拡張機能を使用しています。これは非常に簡単です。

$('#my-selector').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
});

ここで、これらのドロップダウンをプログラムで (AJAX 応答から) 生成したいと考えています。そのために、ドキュメントでは「dataprovider」メソッドの使用を推奨しています。enableFilteringとincludeSelectAllOptionオプションを保持しながらこれを達成する方法がわかりません。

私の直感では、次のようにする必要があります。

$('#example-dataprovider').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true
});  

var options = [
  {label: 'Option 1', title: 'Option 1', value: '1'},
  {label: 'Option 2', title: 'Option 2', value: '2'},
  {label: 'Option 3', title: 'Option 3', value: '3'},
  {label: 'Option 4', title: 'Option 4', value: '4'},
  {label: 'Option 5', title: 'Option 5', value: '5'},
  {label: 'Option 6', title: 'Option 6', value: '6'}
];

$('#example-dataprovider').multiselect('dataprovider', options);

しかし、これはうまくいきません。フォームを構築するためdata-providerのより単純な呼び出しを呼び出すと、メソッドを機能させることができます。multiselect

$('#example-dataprovider').multiselect();

しかし、その後、フィルタリングを追加してselectAllを後から追加する方法がわかりません。

プログラムで作成したドロップダウンでフィルタリングと selectAll オプションを指定するにはどうすればよいですか?

これがフィドルです。

4

2 に答える 2

0

回避策を見つけました。これは、このツールを使用する「想定」方法ではないように感じますが、機能しているようです。dataproviderメソッドが期待どおりに機能していないように見える理由を知りたいと思っています。

とにかく、私の現在の解決策は、d3 を使用して<option>要素を必要なものに置き換えてから、複数選択の「再構築」メソッドを呼び出してウィジェットを再構築することです。

$(document).ready(function() {
    $('#example-filterBehavior').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllValue: 'select-all-value',
        selectAllName: 'select-all-name',
        filterBehavior: 'value',
        selectedClass: 'multiselect-selected'
    });
});


var options = [{'value':1, 'title':'First'},
               {'value':2, 'title':'Second'}];

form = d3.selectAll('#example-filterBehavior');

form.selectAll('option').remove();

form.selectAll('option')
    .data(options)
    .enter().append('option')
    .attr('value', function(d){return d.value})
    .text(function(d){return d.title});

 $('#example-filterBehavior').multiselect('rebuild');

後世のためのjsfiddle。

于 2015-03-21T03:25:41.977 に答える