Question

我已导入所有必需的js和css文件。但是带有复选框的多选下拉列表不起作用。输出很简单，没有下拉列表和复选框。请建议我。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" type="text/css"></link>
<script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multi-select-demo').multiselect();
    });
</script>
<select id="multi-select-demo" multiple="multiple">
   <option value="jQuery">jQuery tutorial</option>  
   <option value="Bootstrap">Bootstrap Tips</option>
   <option value="HTML">HTML</option>
   <option value="CSS">CSS tricks</option>
   <option value="angular">Angular JS</option>
  </select>
</body>

Answer 1

<select id="multi-select-demo" multiple="multiple" style="display: none;">
  <optgroup label="Mathematics">
    <option value="analysis">Analysis</option>
    <option value="algebra">Linear Algebra</option>
    <option value="discrete">Discrete Mathematics</option>
    <option value="numerical">Numerical Analysis</option>
    <option value="probability">Probability Theory</option>
  </optgroup>
  <optgroup label="Computer Science">
    <option value="programming">Introduction to Programming</option>
    <option value="automata">Automata Theory</option>
    <option value="complexity">Complexity Theory</option>
    <option value="software">Software Engineering</option>
  </optgroup>
</select>

$(document).ready(function() {
  $('#multi-select-demo').multiselect();
});

JsFiddle

Answer 2

在多选

上正确引用CDN

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multi-select-demo').multiselect();
    });
</script>
<select id="multi-select-demo" multiple="multiple" >
   <option value="jQuery">jQuery tutorial</option>  
   <option value="Bootstrap">Bootstrap Tips</option>
   <option value="HTML">HTML</option>
   <option value="CSS">CSS tricks</option>
   <option value="angular">Angular JS</option>
  </select>

这是它的一个CDN。

这是一个显示它正常工作的小提琴https://jsfiddle.net/MarkSchultheiss/1gn2w0ub/

我正在使用bootstrap来显示多选下拉列表，但它显示的是简单的下拉列表

2 个答案: