ホームページ > 記事 > ウェブフロントエンド > js で動的レンダリング コードを選択してセカンダリ リンケージを実現します
この記事では、二次連携を実現するための js での動的レンダリングの選択に関するコードを紹介します。必要な方は参考にしていただければ幸いです。
以下は 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 実装 HTML での共有例
選択セカンダリ リンケージの AngularJS 実装ドロップダウンメニューのステップバイステップの説明
以上がjs で動的レンダリング コードを選択してセカンダリ リンケージを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。