select2使用

最新推荐文章于 2024-07-30 11:44:31 发布

糖分。

最新推荐文章于 2024-07-30 11:44:31 发布

阅读量4.4k

点赞数

分类专栏： css & js 文章标签： select

本文链接：https://blog.csdn.net/u012560410/article/details/19609121

版权

css & js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下载了select2的包，样式很好看，就自己在记事本里用着试试

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="./bootstrap.min.css" rel="stylesheet" media="screen">
	<script src="./jquery-2.0.3.min.js"></script>
	<script src="./jquery-migrate-1.2.1.js"></script>
        <script src="./bootstrap.min.js"></script>
	<link href="./select2.css" rel="stylesheet"/>
	<script src="./select2.min.js"></script>
    <!-- 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.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
	<h1>Hello, world!</h1>
 <h2 class="page-header">区域一</h2>
 <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 <h2 class="page-header">区域二</h2>
 <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 <h2 class="page-header">区域三</h2>
 <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
	
	<br>
	<button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">链接</button>
<br>
<br>
<br>
	select2：
	<br>
        <select id="e1" style="width:300px">
	     <option ></option>
	     <optgroup label="一">
		  <option value="1">1</option>
		  <option value="2">2</option>
	     </optgroup> 
	     <optgroup  label="二">
		  <option value="3">3</option>
		  <option value="4">4</option>
	     </optgroup>
        <select>
 <script>
$(document).ready(function() { $("#e1").select2({
 placeholder: "Select a State",
 allowClear: true
}); });
</script>

  </body>
</html>

我导了jquery2.0.3的js。。。然后怎么都出不来效果。。

其实是版本的问题，用firebug查看了select2使用的jquery的js：

http://ivaynberg.github.io/select2/