2017-02-26 50 views
0

我已經導入了所有需要的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> 

回答

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

0

適當參照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/

+0

請注意,您也可以在您的網站上承載這些... –