标签：前端

select2组件-一款功能强大的jquery表单处理插件

select2是一款很好用的jquery插件。功能貌似很多很强大。这里我只简单介绍我使用它最基础的功能-在select标签中搜索options。

有这样一个需求：在<select>标签中有非常多的<option>，如果我们想找到自己需要的某个选项，是非常耗时的。select2插件提供一个简单的可以搜索的功能，如下图

这样我们直接搜索自己的选项，就会非常方便。

下面介绍下具体如何引入select2插件，以及启用：

1.在文件中引入select2的js和css资源

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

上面是他的CDN远程库，也可以下载到本地引用，可以点击这里下载 SELECT2资源下载

2.启用它很简单

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

这样就可以了。

当然这是select2插件最简单的应用实例，更多方法可以参考select2官方说明

select2官网 https://select2.org/

其他作者介绍 http://www.cnblogs.com/wuhuacong/p/4761637.html

js实现点击加减数量

一般在商城网站，下单商品时，商品数量可以点击加减符号对数量进行增加和减少。这个用js可以实现，下面介绍下：

代码如下

<div class="item">
	购买数量：
	<div class="buynum">
		<a href="javascript:void(0);" class="jx">-</a>
		<input id="age" name="buynum" min="1" max="10" size="3" step="1" value="1" type="text">
		<a href="javascript:void(0);" class="zd">+</a>
	</div>
</div>

<script src="js/jquery.js"></script>
<script>
	$(".zd").click(function(){
		var buynum = $(this).parent().find('input');
		var newnum = parseInt(buynum.val())+1;
		buynum.val(newnum);
	});
	$(".jx").click(function(){
		var buynum = $(this).parent().find('input');
		var newnum = parseInt(buynum.val())-1;
		if(newnum < 1){
			newnum = 1;
		}
		buynum.val(newnum);
	});
</script>

注意：parseInt()函数是将字符串转为整型数字。

 

CSS强制不换行、超出部分显示省略号

最近在制作列表使用<li>标签，默认li标签内的内容是自动换行的。由于样式需要，要求li标签的内容不换行。

默认自动换行状态如图：

这样是很不美观的，我们需要给li标签做以下css修饰：

li {
  overflow: hidden; 
  white-space: nowrap;
  text-overflow:ellipsis;
}

注意：overflow是隐藏超出内容，white-space是强制不换行，在一行内显示，text-overflow是超出部分显示省略号。

修改后的样式如图