使用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");//取值
$("#id").select2("data").text;//text取值
第三,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
select2多选界面赋值和JS方法的赋值
<html>
<head></head>
<body>
<form:select path="invoiceItem" disabled="true" class="input-xlarge " style="width: 95%;" cssclass="required" multiple="multiple">
<c:foreach items="${fns:getDictList('invoice')}" var="list">
<c:set value="${ fn:split(jdCaiwuFinancialaccount.invoiceItem, ',') }" var="arr" />
<c:foreach items="${arr}" var="s">
<option value="${list.value}" <c:if="" test="${list.value==s}">selected>${list.label}</option>
</c:foreach>
</c:foreach>
</form:select>
</body>
</html>
多选赋值方法:
var invoiceItem = result.invoiceItem;
if (!isNull(invoiceItem)) {
var temp = result.invoiceItem.split(",");
$("#invoiceItem").val(temp).trigger('change'); //发票项目
}