Search code examples
javascriptasp.net-mvc-4bootstrap-multiselect

bootstrap-multiselect not work inside table


If I declare div with select class inside table not work dropdown. But if implement outside table work fine. How decided this problem?

<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>

Solution

  • Not sure if you are missing any steps detailed in the documentation but here is a working demo:

      $(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>