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=&#39;&#39;>请选择</option>");
$.each(data, function(i,item){
var t = item.text, v = item.value, option = "<option value=&#39;"+v+"&#39;>"+t+"</option>";
arr.push(option);
})
$("#"+id).empty();
$("#"+id).append(arr.join(""));
form.render(&#39;select&#39;);
})
}
//表单提交
form.on(&#39;submit(save)&#39;,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(&#39;select(oaalFtype)&#39;, 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 サイトの他の関連記事を参照してください。