select2的简单实用
1、<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/select2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
本地下载select2的js以及css文件，js要以来jquery，所以要在select2之前引入jquery
2、<style>
select {
width: 40%;
}
</style>
//编写select的样式文件
</head>
<div>
<h1>测试select2</h1>
</div>
<div>
爱好：<select class="select2" id="demoSelect" data-placeholder="单击搜索">
<option value=""></option>
</select>
class引入select2，即可使用样式
3、爱好2：<select class="select2" id="demoSelect2" name="name[]" multiple="multiple" data-placeholder="单击搜索">
<option value="4">php</option>
<option value="5">c</option>
<option value="6">c++</option>
</select>
</div>
两种方式模拟select2的样式
1、<div>
<input list="browsers">
//使用html5的标签和select2做对比
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
2、<option value="Opera">
<option value="Safari">
</datalist>
</div>
<div>
//编写js模拟ajax请求
<script>
$(function() {
3、var htmlOption = '<option value="1">java</option><option value="2">javaScript</option><option value="3">html</option>';
$('#demoSelect').append(htmlOption);
//直接初始化下拉选
$('#demoSelect').select2();
$('#demoSelect2').select2();
$('#demoSelect').change(function(){
var value = $('#demoSelect').val();
4、console.log(value);
});
//多选框打印选择结果
$('#demoSelect2').change(function(){
var value = $('#demoSelect2').val();
console.log(value);
});
})
</script>
</html>
