web-dev-qa-db-ja.com

Bootstrapフローの複数選択更新オプションリスト

bootstrap multi-select を使用し、フローのオプションをajaxで更新したい

私のマルチセレクトの初期に入力するには

<select name="model" class="multiselect" multiple="multiple">
                <? foreach ($sel_models as $mod) { ?>
                    <option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option>
                <? } ?>    
</select>

次に、イベント時にオプションリストを次のajaxで更新します

再構築方法を使用しようとしましたが、作成後にドロップダウンを起動しません

 $.ajax({
        type: 'post',
        url: "helper/ajax_search.php",
        data: {models: decodeURIComponent(brands)},
        dataType: 'json',
        success: function(data) {
            $('select.multiselect').empty();
            $('select.multiselect').append(
                    $('<option></option>')
                    .text('alle')
                    .val('alle')
                    );

            $.each(data, function(index, html) {
                $('select.multiselect').append(
                        $('<option></option>')
                        .text(html.name)
                        .val(html.name)
                        );
            });

            $('.multiselect').multiselect('rebuild')
        },
        error: function(error) {
            console.log("Error:");
            console.log(error);
        }
    });

Firebugを使用すると、リストが生成されていることを確認できますが、選択時に表示されません

javascriptjqueryajaxtwitter-bootstrap
9
fefe

ドキュメントで私は読むことができます：

。multiselect（ 'setOptions'、options）複数選択の初期化後に構成を変更するために使用されます。これは、.multiselect（ 'rebuild'）。と組み合わせて使用​​すると便利です。

最初の方法ではウィジェットデータを変更できないかもしれません。正しい方法では、setOptionsメソッドを使用する必要があります。

それ以外の場合：おそらく、ウィジェット.multiselect('destroy')を破棄して、もう一度作成することを考えるべきでしょう。

コメント後に更新：

ドキュメント：（リンクしました）

以下の方法で選択のオプションを構築するためのデータを提供します。

var data = [
    {label: "ACNP", value: "ACNP"},
    {label: "test", value: "test"}
];
$("#multiselect").multiselect('dataprovider', data);

So： ajax呼び出しからデータを取得する場合、オブジェクトの配列を作成する必要があります（これは、必要な選択のオプションです）のような形式

var data = 
[
    {label: 'option1Label', value: 'option1Value'},
    {label: 'option2Label', value: 'option2Value'},
    ...
]

オブジェクト配列が作成されたら、メソッドを呼び出すだけです

$("#multiselect").multiselect('dataprovider', data);

ここで、dataはオブジェクトの配列です。

私は明確であることを望みます：/

24
Pimento Web

Multiselect（ 'dataprovider'、data）の代わりに、質問で行ったとおりにjquery appendを使用してリストを作成できます。必要な変更は、ajaxリクエストが完了するまで再構築を遅らせることだけです。

var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data) { 
   $.each(data, function(i, driver) {
      $('#toolbar select[name="drivers"]').append('<option>'+driver+'</option>');
   });
});
buildDrivers.complete(function() {
    $('.multiselect').multiselect('rebuild');
});

ドキュメントについては http://api.jquery.com/jquery.getjson/ を参照してください

10
tbradley22

オプションをフィルタリングしてサーバー側から取得した後にオプションを更新する機能が追加されました。このソリューションは、新しいオプションを注入し、選択を破棄して再度初期化するという概念に基づいています。

私は考慮に入れました：

  1. 残っている必要がある既存の選択されたオプションを考慮します。
  2. 重複するオプションの削除（すでに選択されているオプションとサーバーからの新しいオプションが競合している可能性があります）。
  3. 更新後もオプショントレイを開いたままにします。
  4. 検索テキストボックス内の前のテキストを再割り当てしてフォーカスします。

次のように、2つのヘルパー関数と共に、 'refresh'関数の後に関数として 'updateOptions'を追加するだけです。

updateOptions: function (options) {
        var select = this.$select;
        options += this.getSelectedOptionsString();
        var selectedIds = select.val(),
            btnGroup = select.next('.btn-group'),
            searchInput = btnGroup.find('.multiselect-search'),
            inputVal = searchInput.val();

        options = this.removeOptionsDuplications(options);
        if (!options) {
            options = '<option disabled></option>';
        }

        // 1) Replacing the options with new & already selected options
        select.html(options);

        // 2) Destroyng the select
        select.multiselect('destroy');

        // 3) Reselecting the previously selected values
        if (selectedIds) {
            select.val(selectedIds);
        }

        // 4) Initialize the select again after destroying it
        select.multiselect(this.options);

        btnGroup = select.next('.btn-group');
        searchInput = btnGroup.find('.multiselect-search');

        // 5) Keep the tray options open
        btnGroup.addClass('open');

        // 6) Setting the search input again & focusing it
        searchInput.val(inputVal);
        searchInput.focus();
    },
    getSelectedOptionsString: function () { // Helper
        var result = '',
            select = this.$select,
            options = select.find('option:selected');

        if (options && options.length) {
            $.each(options, function (index, value) {
                if (value) {
                    result += value.outerHTML;
                }
            });
        }

        return result;
    },
    removeOptionsDuplications: function (options) { // Helper
        var result = '',
            ids = new Object();

        if (options && options.length) {
            options = $(options);
            $.each(options, function (index, value) {
                var option = $(value),
                    optionId = option.attr('value');

                if (optionId) {
                    if (!ids[optionId]) {
                        result += option[0].outerHTML;
                        ids[optionId] = true;
                    }
                }
            });
        }
        return result;
    },

デモ：

状態：

"オプション1"

$('#select').multiselect('updateOptions', '<option value="2">Option 2</option>');

状態：

「オプション2」

"オプション1"

0
Jacob

これは、既存のBootstrap MultiSelect。

以下は、オプションを追加する簡単な例です。

function addOptionToMultiSelect(multiselectSelector, value, selected) {
    var data = [];
    $(multiselectSelector + ' option').each(function(){
        var value = $(this)[0].value;
        var selected = $(this)[0].selected;
        data.Push({label: value, value: value, selected: selected});
    });

    // Add the new item
    data.Push({label: value, value: value, selected: selected});

    $(multiselectSelector).multiselect('dataprovider', data);
}

簡単にするために、ラベルと値の両方がオプションで同じであると仮定しました。すでに選択されているオプションは、既存のオプションから選択された属性を読み取ることによって処理されます。無効化された属性やその他の属性を追跡することで、より高度なものにすることができます。

サンプル：

addOptionToMultiSelect('#multiselect-example', 'new-option', true);
0
Youness