Maison  >  Article  >  interface Web  >  Sélectionnez le code de rendu dynamique dans js pour obtenir une liaison secondaire

Sélectionnez le code de rendu dynamique dans js pour obtenir une liaison secondaire

不言
不言original
2018-08-25 10:15:242160parcourir

Le contenu de cet article concerne le code permettant de réaliser une liaison secondaire via un rendu dynamique sélectionné en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Ce qui suit fait partie du code 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>

Ce qui suit fait partie du js

layui.use([&#39;element&#39;, &#39;form&#39;, &#39;layer&#39;], 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);
}); 
});

Recommandations associées :

js implémente Select en HTML Partage d'instance de liaison de deuxième niveau

Implémentation AngularJS du menu déroulant de sélection de liaison de deuxième niveau, explication étape par étape

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn