這篇文章帶給大家的內容是關於js中select動態渲染實現二級連動的程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
以下是部分html程式碼
<div class="layui-form-item layui-row layui-col-space5"> <div class="layui-col-md6"> <label class="layui-form-label">一级分类</label> <div class="layui-input-block layui-select-block"> <select name="oaalFtype" id="oaalFtype" lay-filter="oaalFtype"></select> </div> </div> <div class="layui-col-md6"> <label class="layui-form-label">二级分类</label> <div class="layui-input-block layui-select-block"> <select name="oaalStype" id="oaalStype" lay-filter="oaalStype"></select> </div> </div> </div>
以下是部分js
layui.use(['element', 'form', 'layer'], function(){ var $ = layui.jquery ,element = layui.element ,form = layui.form ,layer = layui.layer; //初始化下拉框 function initSelect(id,url){ $.post(url,function(result){ var data = result.data; var arr = new Array(); arr.push("<option value=''>请选择</option>"); $.each(data, function(i,item){ var t = item.text, v = item.value, option = "<option value='"+v+"'>"+t+"</option>"; arr.push(option); }) $("#"+id).empty(); $("#"+id).append(arr.join("")); form.render('select'); }) } //表单提交 form.on('submit(save)',function(data){ var options = { url: "${mbase}/saveOaAssetlib.do", type: "POST", success: function (data) { if(data.success){ layer.alert(data.messages[0],{icon: 1},function(){ window.close(); window.opener.location.reload(); }); } } }; $("#formData").ajaxSubmit(options); }) //一级分类 var oaalFtype = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/FTYPE&TYPE=jsn_grid"; initSelect("oaalFtype",oaalFtype); //批次 var oaalBatch = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/BATCH&TYPE=jsn_grid"; initSelect("oaalBatch",oaalBatch); //监控一级分类 form.on('select(oaalFtype)', function(data){//2级联动 //二级分类初始化 var oaalStype = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/FTYPE/"+encodeURI(data.value)+"&TYPE=jsn_grid"; initSelect("oaalStype",oaalStype); }); });
相關推薦:
#以上是js中select動態渲染實現二級聯動的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!