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>