jeestie框架中下拉框select2的用法

        使用select2方法是为了使下拉框带有搜索选项,方便用户选择。使用前就是普通的下拉框,如果下拉的选项很多,你找起来会很费劲,使用select2就可以快速选择到你想要选择的选项了。下面将介绍几个常用的知识。

第一,如何给定普通的下拉框select2权限

1.jeesite框架中普通的下拉框赋select2权限:

$("select").select2();

2.常规的页面赋select2权限的时候需要引入一些包,这个需要注意一下!

<!-- 下拉框样式 -->
<link type="text/css" rel="stylesheet" href="../css/select2.css" />
<link type="text/css" rel="stylesheet" href="../js/tree-multiselect/jquery.tree-multiselect.css" />
<!-- 下拉框js -->
<script src="../js/select2/select2.min.js"></script>
<script src="../js/tree-multiselect/jquery.tree-multiselect.js"></script>
<script type="text/javascript">
    $ (function(){
        $ ("#select").select2 ();//要赋值的select的id
    });
</script>

第二,select2的取值和赋值

$("#id").select2("val","");//赋值
$("#id").select2("val");//取值

第三,jeesit子表中如何给定select2权限以及下拉框事件选中值后,隐藏掉必填项信息,没选中显示必填项信息的方法

function addRow(list, idx, tpl, row){
	$(list).append(Mustache.render(tpl, {
		idx: idx, delBtn: true, row: row
	}));
	$(list+idx).find("select").each(function(){
		$(this).val($(this).attr("data-value"));
		$(this).select2();//给下拉框给定下拉搜索权限

		var selectId="#"+$(this).attr("id");//select 的id 
		selectChFc(selectId);//下拉框选中后移除必填项提示
	});
	$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
		var ss = $(this).attr("data-value").split(',');
		for (var i=0; i<ss.length; i++){
			if($(this).val() == ss[i]){
				$(this).attr("checked","checked");
			}
		}
	});
	}
}

jeesite.js中添加公共的js方法

//下拉框事件选中值后,隐藏掉必填项信息,没选中显示必填项信息   start
function selectFc(){
	$("#inputForm").find("select").each(function(){
		$(this).bind("change",function(){
			var temp=$(this).val();
			var fortemp=$(this).attr("name");
			if(temp!="" && temp!=null && temp!="undefined"){
				$("label[for='"+fortemp+"']").hide();
			}else{
				$("label[for='"+fortemp+"']").show();
			}
		})
	})
}

//子表里边的下拉框处理
function selectChFc(obj){
	$(obj).parent().find("select").bind("change",function(){
		var temp=$(this).val();
		var fortemp=$(this).attr("id");
		if(temp!="" && temp!=null && temp!="undefined"){
			$("label[for='"+fortemp+"']").hide();
		}else{
			$("label[for='"+fortemp+"']").show();
		}
	})
}
//下拉框事件选中值后,隐藏掉必填项信息,没选中显示必填项信息   end

猜你喜欢

转载自blog.csdn.net/u014135369/article/details/84334872