1

テーブル内の選択クラスで 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>
4

1 に答える 1

0

ドキュメントに記載されている手順が欠落しているかどうかはわかりませんが、動作するデモは次のとおりです。

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

于 2014-09-26T10:08:26.313 に答える