2014-04-26 19 views
1

我想在使用Dreamweaver CS6預覽的html文件中創建引導程序選擇列表。我有以下代碼應該可以工作,但它不會顯示選擇框,因爲它應該 - 當您選擇一個項目時,應該在該項目旁邊出現勾號。此外,盒子的外觀與http://silviomoreto.github.io/bootstrap-select/上的示例看起來不同。Silvermoreto的引導程序選擇不按預期工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css"> 
    <link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"> 
    <link href="../bootstrap-select.css" rel="stylesheet" type="text/css"> 
    <link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <h1>Hello, world!</h1> 

    <span class="label label-default">Default</span> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script> 
    <script> $('.selectpicker').selectpicker(); </script> 

    <select class="selectpicker" multiple data-selected-text-format="count>3"> 
     <option>Mustard</option> 
     <option>Ketchup</option> 
     <option>Relish</option> 
     <option>Onions</option> 
    </select> 

    <form action="welcome.php" method="post"> 
     Name: <input type="text" name="name"> 
     <br> 
     E-mail: <input type="text" name="email"> 
     <br> <input type="submit"> 
    </form> 
</body> 
</html> 

回答

1

我沒有看到您的代碼有任何問題。這裏有一個工作小提琴:

http://jsfiddle.net/cuovoqzw/

HTML:

<h1>Hello, world!</h1> 

<span class="label label-default">Default</span> 
<select class="selectpicker" multiple data-selected-text-format="count>3"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
    <option>Onions</option> 
</select> 

<form action="welcome.php" method="POST"> 
    Name: <input type="text" name="name"> 
    <br /> 
    E-mail: <input type="email" name="email"> 
    <br /> 
    <input type="submit"> 
</form> 

JS:

$('.selectpicker').selectpicker(); 

最可能的原因,我看到的是,你已經包括多個實例Bootstrap CSS文件在您的代碼中。只包括必需的和刪除其餘的。