多选下拉引导程序

时间:2014-05-21 06:40:07

标签: php jquery html twitter-bootstrap-3

我已将此plugin用于多选,而以下是我的代码。仅显示按钮。下拉列表没有显示,我一直未能找到出错的地方。请建议。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form</title>

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

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

</head>
<body>

<form name="form1" class="form-horizontal" action="http://blahblah/blah/detr.php" onsubmit="return validateForm();" method="get">
<div class="component">
<div class="form-group">

        <div class="form-group" style="text-align:center;">
                <img src="img/img.png" alt="Form" />
                <h2>Form </h2>
                <br />
        </div>
        <label class="col-md-4 control-label" for="selectmultiple">Items</label>
    <div class="col-md-4">
        <select class="multiselect" multiple="multiple">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
        </select>
    </div>
</div>
</div>
</form>

    <script type="text/javascript">

    $(document).ready(function() {
    $('.multiselect').multiselect();
  });


</script>
</body>
</html>

1 个答案:

答案 0 :(得分:3)

因为你在jquery之前加载bootstrap。您必须首先加载jquery库。从头标记更改脚本加载的顺序:

从:

<script src="bootstrap/js/bootstrap.min.js"></script>  <!-- put it below-->
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>

更改为

<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
相关问题