1. 程式人生 > >jeestie框架中下拉框select2的用法

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