Bootstrap drop down multi box plug in Bootstrap Multiselect

Import file:

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

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Use

jsp page

 <div class="form-group">
              <label class="col-sm-4 control-label"><i class="required">*&nbsp;</i> Department: </label>
              <div class="col-sm-6">
                <div class="myOwnDdl">
                <select name="expendProject" id="user_dept" class="form-control">
                  <option value="" selected="selected"> Please select a department </option>
                </select>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label"><i class="required">*&nbsp;</i> To Roles: </label>
              <div class="col-sm-6">
                <div class="myOwnDdl">
                  <select name="expendProject" id="user_role" class="form-control" multiple="multiple">
                    <c:forEach var="var" items="${requestScope.roles }">
                      <option value="${var.id}">${var.roleName}</option>
                    </c:forEach>
                  </select>
                </div>
              </div>
            </div>

js:

$("#user_role").multiselect({  //respectively control the maximum height of the drop-down container, allow the maximum number of selected items to be displayed concretely (the rest are displayed in digital form), control interlaced color change, select all, and support retrieval.

maxHeight:300,
        numberDisplayed:3,
        optionClass: function(element) {
          var value = $(element).parent().find($(element)).index();
          if (value%2 == 0) {
            return 'even';
          }
          else {
            return 'odd';
          }
        },
        includeSelectAllOption: true,
        enableFiltering: true,
        selectAllJustVisible: true,
        nonSelectedText: ' Please select a role ', // Default display text 
        selectAllText: ' All selection ' // Selected text 
      });

If you wish to modify its width, refer to: http://m.blog.csdn.net/article/details? id=50971672

Set an option to be selected according to id of option.

$( ' #selectId').multiselect( ' select',optionId);