根据select2的官方文档做练习，做的是 basic usage这个最简单的例子。做这个练习的时候发现，浏览器展示下拉选的样式不正常，宽度非常窄，也正常使用了select2自身CSS文件和jquery，不知道是什么原因导致的该问题。如下图
下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
</body>
</html>
可能是浏览器的原因，也可能是select2的这个版本有问题，哪怎么办呢？
一开始打算直接修改CSS样式进行覆盖，但在Chrome开发者控制台里发现select2通过在元素标签的style里写入了width样式，难以覆盖。 如下图
解决方案
select2的这个宽度样式问题其实是有解决方案的。在使用.select2()方法的时候，传入width选项即可。我们的例子修改成如下，给它的width传入一个200像素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2({width: '200'});
});
</script>
</body>
</html>
现在显示正常了，修改行数在22行。
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
笔记与思考