web-dev-qa-db-ja.com

Bootstrap Multiselectを使用して、選択したすべての値を取得し、AJAX

私は Bootstrap Multiselect を使用しています。これは私のHTMLでの設定です：

_<div class="form-group">
    <select class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
        <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
    </select>
</div>
_

クエリに選択した値、Ajaxコードのスニペットを使用したかったのです。

_$.ajax({
    url: "cnt_bldg/",
    type: "GET",
    dataType: "JSON",
    data: {
        'brgy_id': brgy_id,
        'bldg_type': $('#bldg_type option:selected').val()
    },
    ...
_

$('#bldg_type option:selected').val()の問題は、1つの値しか取得できないことです。例：選択オプションでMarketと_Police Station_をチェックし、コンソールで確認しました_http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market"._ Marketのみを取得します。

すべての値を取得してクエリに使用するにはどうすればよいですか？

ところで、私はDjangoを使用しています。 この回答 はすでに読んでいますが、上記のAJAXコードで結果を使用する方法がわかりません。

jqueryajaxtwitter-bootstrapbootstrap-multiselect
5
Sachi Tekina
<div class="form-group">
    <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
        <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
    </select>
</div>

選択したコントロールにIDmultiselectを追加します。

以下のように、JavaScriptで変数をグローバルに宣言します。

var selected = [];

以下のように初期化します[提供した回答リンクから]

$('#multiselect1').multiselect({
    selectAllValue: 'multiselect-all',
    onChange: function(element, checked) {
        var brands = $('#multiselect1 option:selected');
        $(brands).each(function(index, brand){
            selected.Push([$(this).val()]);
        });
    }
});

あなたのajaxを通してそれを送ってください。

$.ajax({
    url: "cnt_bldg/",
    type: "GET",
    dataType: "JSON",
    data: {
        'brgy_id': brgy_id,
        'bldg_type': selected //This will send the values as list of strings
    },
    ...

注-受信した値を操作しながら、サーバーメソッドの文字列のリストとして受け入れます!!

3
Guruprasad Rao

簡単に試しましたか

$('#bldg_type').val()

それは私のブートストラップ-multiselectで動作します。

12
kite

HTML

<div class="form-group">
        <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
            <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
        </select>
</div>

Jquery

var selected = $('#multiselect1').val()
4
Afsal KK

複数選択オプションの値を取得するのは本当に簡単です。

$('#bldg_type').multiselect({
       onChange: function(){
             var selectedOptions = $('#bldg_type').val();
             console.log(selectedOptions);
}})

SelectedOptionsは、選択されたオプションのリストを提供するはずです。これは、selectタグのオプションから選択されたすべての値を提供します。

SelectedOptions変数をグローバルに定義して、ajax呼び出しがアクセスできるようにすることができます。

頑張って、それが役立つことを願っています

3
Chait