基于ySelect的多级下拉选择

最新推荐文章于 2023-03-24 14:46:24 发布

嘿嘿潶黑黑

最新推荐文章于 2023-03-24 14:46:24 发布

阅读量1.2k

点赞数 1

分类专栏： JS 文章标签： jquery

本文链接：https://blog.csdn.net/m0_37623485/article/details/108870468

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基于ySelect的多级下拉选择

多级选择下拉框

JQuery下拉多选插件ySelect.js下载
 JQuery下拉多选插件ySelect.js演示与使用

多级选择下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery ySelect Plugin</title>
		<script src="js/jquery-1.11.3.min.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="css/ySelect.css" rel="stylesheet" type="text/css">
		
		<script src="js/bootstrap.min.js"></script>
		<script src="js/ySelect.js"></script>
		<style>
			.fs-optgroup{
				position: relative;
			}
			.fs-option{
				left: 30px;
			}
			.fs-optgroup-label{
				margin-left: 20px;
			}
			.fs-optgroup-label-choose{
				position: absolute;
				left: 6px;
				top: 4px;
				border: 1px solid #AEAEAE;
				border-radius: 4px;
				width: 14px;
				height: 14px;
			}
			.my-selected{
				background-color: #01A911;
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC);
				background-repeat: no-repeat;
				background-position: center;
				border-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<select id="m1" class="demo" multiple="multiple">
				
			</select>
		</div>
		<script>
			$(function(){
				var data=['饮料',
					'水果',
					'日常用品',
					'工具'];
				var data1=[
					'加多宝',
					'王老吉',
					'可乐'
				];
				
				addElement();
				$('.demo').ySelect();
				addChoose();
				
				//动态添加下拉选项
				function addElement(){
					for(var i = 0;i < data.length;i++){
						$('#m1').append('<optgroup label="'+data[i]+'"></optgroup>');
						var d = data1;
						for(var j = 0;j < d.length;j++){
							$('optgroup[label="'+data[i]+'"]').append('<option value="'+(j+1)+'">'+d[j]+'</option>')
						}
					}
				}
				
				//添加分级多选功能
				function addChoose(){
					$('.fs-optgroup-label').before('<div class="fs-optgroup-label-choose"></div>');
					$('.fs-optgroup-label-choose').click(function(){
						var $wrap = $(this).closest('.fs-wrap');
						var selected = [];
						if($(this).hasClass('my-selected')){
							$(this).removeClass('my-selected');
							$(this).siblings(".fs-option").removeClass('selected');
							selected = $(this).attr('data-value');
						}else{
							$(this).addClass('my-selected');
							$(this).siblings(".fs-option").addClass('selected');
							$wrap.find('.fs-option.selected').each(function(i, el) {
							    selected.push($(el).attr('data-value'));
							});
						}
						$wrap.find('select').val(selected);
						$wrap.find('select').ySelect('reloadDropdownLabel');
						$wrap.find('select').ySelect('setwrap');
					});
					//选中一个分级
					$('.fs-selectAll').click(function(){
						if($(this).hasClass('selected')){
							$('.fs-optgroup-label-choose').removeClass('my-selected');
						}else{
							$('.fs-optgroup-label-choose').addClass('my-selected');
						}
					});
					//分级一个选项未选中，级别也未选，选项全选，级别也为选中
					$('.fs-option').click(function(){
						var allOption = $(this).parent().find('.fs-option');
						var allSelect = true;
						for(var i = 0;i < allOption.length;i++){
							if($(this).hasClass('selected')){
								allSelect = false;
								break;
							}
							if(allOption.eq(i).html() != $(this).html()){
								if(!allOption.eq(i).hasClass('selected')){
									allSelect = false;
									break;
								}
							}
						}
						
						if(allSelect)
							$(this).parent().find('.fs-optgroup-label-choose').addClass('my-selected');
						else
							$(this).parent().find('.fs-optgroup-label-choose').removeClass('my-selected');
					})
				}
				
				
			})
		</script>
	</body>
</html>

效果
分级可选下拉框

嘿嘿潶黑黑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于ySelect的多级下拉选择

基于ySelect的多级下拉选择多级选择下拉框JQuery下拉多选插件ySelect.js下载JQuery下拉多选插件ySelect.js演示与使用多级选择下拉框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery ySelect Plugin</title> <script src="js/jquery-1.11.3.min.j
复制链接

扫一扫

专栏目录