Layui中Select控件相关使用
Sam.zheng
2022-11-23
1.概述
主要讲解layui如何监听Select的变化，以及获取Select内容的相关值2.基本Html
<div class="layui-form">
<div class="layui-row">
<div class="layui-col-md4">
<select name="aiHao"id="aiHao"lay-filter="aiHao-filter">
<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">台球</option>
</select>
</div>
</div>
</div>
3.监听Select的Change事件
layui.use(["form"],function(){
var form=layui.form;
htmlradio多选怎么用("select(aiHao-filter)",function(e){
//当前选择的索引
var elem=e.elem;
/
/得到选择的几个索引
var index=elem.selectedIndex;
console.log("选择了第几个:",index);
var text=elem[elem.selectedIndex].text;
var value=e.value;
console.log("当前text与value值是:",text,value);
});
});
代码说明:
<("select(aiHao-filter)"表单来监听过滤器lay-filter的Select控件。
回调函数中的  e.
e.elem表示是当前的元素
e.elem.selectedIndex表示是选择了第几个元素
e.value表示当前选择了哪一个select的option的值value值
elem[elem.selectedIndex].text表示选择了哪一个select的option的值text值
4.select动态渲染
渲染的语法
type为select,checkbox,radio等
filter是select,checkbox,radio对应的lay-filter过滤器名称
动态对select赋值option的选项时，需要使用der()进行重新渲染
比如有两个select，第一个select在改变的时候，重新渲染第二个select的option的值
代码如下
//每一个Select在Change的时候，根据每个select的value值来初始化第二个Select控件的值。动态初始化的时候，需要调用der()进行控件的重新渲染
<('select(CateInfoCode-Filter)',function(e){
var parentCode=e.value;
var url="/MemberXxx/GetChildCate?ParentCode="+parentCode;
var param={};
ajaxSyncPost(url,param,function(data){
$("#childCateInfoCode").html("");
$("#childCateInfoCode").append("<option value=''>-请选择
-</option>");
$.each(data,function(i,item){
var selectedInfo="";
if(curCateCode===item.Code){
selectedInfo="selected='selected'";
}
var option="<option value='"+item.Code+"' "+selectedInfo+">"+item.CateInfoName+"</option>";
$("#childCateInfoCode").append(option);
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。