jeestie框架中下拉框select2的用法

最新推荐文章于 2024-02-26 08:51:11 发布

Demon丶冷漠

最新推荐文章于 2024-02-26 08:51:11 发布

阅读量1.6k

点赞数

分类专栏： JS前端技术文章标签： select2的用法 select2的取值和赋值 select2的下拉选择触发事件普通下拉如何变为select2下拉 select2多选下拉的赋值

本文链接：https://blog.csdn.net/u014135369/article/details/84334872

版权

JS前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用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&gt;${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'); //发票项目 
}

Demon丶冷漠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jeestie框架中下拉框select2的用法

使用select2方法是为了使下拉框带有搜索选项，方便用户选择。使用前就是普通的下拉框，如果下拉的选项很多，你找起来会很费劲，使用select2就可以快速选择到你想要选择的选项了。下面将介绍几个常用的知识。第一，如何给定普通的下拉框select2权限1.jeesite框架中普通的下拉框赋select2权限：$("select").select2();2.常规的页面...
复制链接

扫一扫

专栏目录