如何避免在bootstrap multiselect中显示所选选项?

时间:2015-05-26 10:55:30

标签: html twitter-bootstrap bootstrap-multiselect

如何显示而不是选定的值选项1.3我想在您选择任何其他文本时将其他文本显示为默认选项。

<select id="example-dropRight" multiple="multiple">
    <option value="1">Option 1.1</option>
    <option value="2">Option 1.2</option>
    <option value="3">Option 1.3</option>
    <option value="4">Option 2.1</option>
    <option value="5">Option 2.2</option>
    <option value="6">Option 2.3</option>
</select>

图像:bootstrap

2 个答案:

答案 0 :(得分:2)

您可以使用这样的jQuery来覆盖文本。

 $('#example-dropRight').multiselect({
   onChange: function(option, checked) {
     $('.multiselect-selected-text').text('OnChange Text');
   }
 });

$('.multiselect-selected-text').text('OnLoad Text');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

<select id="example-dropRight" multiple="multiple">
  <option value="1">Option 1.1</option>
  <option value="2">Option 1.2</option>
  <option value="3">Option 1.3</option>
  <option value="4">Option 2.1</option>
  <option value="5">Option 2.2</option>
  <option value="6">Option 2.3</option>
</select>

答案 1 :(得分:0)

您可以在multiselect()中使用内置的“buttonText”配置。

$('#example-dropRight').multiselect({
      buttonText: function(options) {
          return "Search or select";
          // you can show the number of selected options
          // return "(" + options.length + ") options selected";
      }
});

参考:http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-buttonText