javascript - bootstrap-multiselect 在表内不起作用

Question

如果我在表中声明 div 并选择类，则下拉列表不起作用。但如果实现外表工作正常。这个问题是怎么决定的？

<script src="Scripts/jquery-1.10.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrapValidator.min.js"></script>

<link href="Content/bootstrap-multiselect.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />

<!-- Include Bootstrap Multiselect JS -->
<script src="Scripts/bootstrap-multiselect.js"></script>

<td>
<div id="multiselectForm" class="form-group">
    <select class="form-control" name="browsers" multiple>
        <option value="chrome">Google Chrome</option>
        <option value="firefox">Firefox</option>
        <option value="ie">IE</option>
        <option value="safari">Safari</option>
        <option value="opera">Opera</option>
        <option value="other">Other</option>
    </select>
</div>
</td>

Answer 1

不确定您是否遗漏了文档中详细说明的任何步骤，但这里有一个有效的演示:

  $(function() {
    $('.form-control')
      .multiselect({
        onChange: function(element, checked) {
          $('#multiselectForm').bootstrapValidator('revalidateField', 'browsers');
        }
      });
    $('#multiselectForm')
      .bootstrapValidator({
        excluded: ':disabled',
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          browsers: {
            validators: {
              callback: {
                message: 'Please choose 2-3 browsers you use for developing',
                callback: function(value, validator) {
                  var options = validator.getFieldElements('browsers').val();
                  return (options != null && options.length >= 2 && options.length <= 3);
                }
              }
            }
          }
        }
      })
  });

.form-group {
  min-width: 70vh;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
<link href="http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap-multiselect.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

<!-- i dont know if i should be using this link :-( -->
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

<table>
  <tr>
    <td>
      <div id="multiselectForm" class="form-group">
        <select class="form-control" name="browsers" multiple>
          <option value="chrome">Google Chrome</option>
          <option value="firefox">Firefox</option>
          <option value="ie">IE</option>
          <option value="safari">Safari</option>
          <option value="opera">Opera</option>
          <option value="other">Other</option>
        </select>
      </div>
    </td>
  </tr>
</table>