web-dev-qa-db-ja.com

すべてを選択する代わりにbootstrap multiselectラベルを変更するには？

私はbootstrapを使用して、複数選択ドロップダウンを使用して、すべての選択テキストを表示できるようにすべて選択オプションを押すとリストの数が表示されます。

http://davidstutz.github.io/bootstrap-multiselect/

jquerytwitter-bootstrapbootstrap-multiselect
14
user1121019

誰かが将来この質問に答えた場合、解決策は

{ nonSelectedText: 'None selected' }

このテキストにグローバル変数を割り当て、JavaScriptで変更します。

値はbootstrap-multiselect.jsファイルにあります。

26
Shamitha Silva

「ラベル」（bootstrap multiselect）のテキストは、次のように「none selected」、「n selected」、「All」Selectedまたは「selected values」の4つのケースすべてに対して変更できます。

JQuery

$('#level').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: 150,
    numberDisplayed: 2,
    nSelectedText: 'selected',
    nonSelectedText: 'None selected',
    buttonText: function(options, select) {
      var numberOfOptions = $(this).children('option').length;
      if (options.length === 0) {
         return nonSelectedText + ' <b class="caret"></b>';
      }
      else{
             if (options.length > numberDisplayed) {
                 if(options.length === numberOfOptions){
                     return ' All Selected' + ' <b class="caret"></b>';
                 }
                 return options.length + ' ' + nSelectedText + ' <b class="caret"></b>';
             }else {
                 var selected = '';
                 options.each(function() {
                    var label = ($(this).attr('label') !== undefined) ?  
                                                       $(this).attr('label'):$(this).html();
                    selected += label + ', ';
                 });
                 return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
             }
       }
    }
});

HTML

<select multiple="multiple" id="level">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

わたしにはできる。楽しんで！

15
Ram

Init objオプションを使用します。

$("#services").multiselect({
  nonSelectedText:'Services'
});

このオプションは私のために働いた。

6
Philip Puthenvila

data-placeholderを使用します

<select data-placeholder="Month">

これは私のために働きます。

5
user674690

公式ドキュメント の後に：

allSelectedTextは、すべてのオプションが選択されている場合に表示されるテキストです。 allSelectedTextの表示を無効にするには、falseに設定します。

オプションを使用

{
...
allSelectedText: false,
...
}
4
Ievgen Baziak

フィリップの答えは私にとってはうまくいきましたが、もう少し完全なものにするだけで、ドキュメントの準備ができたときに呼び出す必要があります。したがって、複数のリストを設定するなど、私にとっての解決策は次のとおりでした。

$(document).ready(function() {
    $("#bedrooms").multiselect({
        nonSelectedText:'Bedrooms'
    });
    $("#bathrooms").multiselect({
        nonSelectedText:'Bathrooms'
    });
    $("#garages").multiselect({
        nonSelectedText:'Garages'
    });
    $("#livingareas").multiselect({
        nonSelectedText:'Living Areas'
    });
});
2
danlynn

3番目のボタンの（ボタンのヒント：「すべて選択」オプション）のマルチセレクトをtestに変更しました。動作しますが、最初に開発者ツール（Chrome/Firefox add F12）からボタンにidを追加する必要があります。

$('#test+ul>li').change(function(){
    $('#test').text($('#test').attr('title'));
});

IDを追加した後にテストできます。その後、jsfiddle.netを使用してください。より迅速にヘルプを見つけることができます。

1
mithataydogmus