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是超出部分显示省略号。

修改后的样式如图