js中select动态渲染实现二级联动的代码

本篇文章给大家带来的内容是关于js中select动态渲染实现二级联动的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

以下是部分html代码

  

  一级分类
  

    
      
  
  

  二级分类
    

     
      
  
  

以下是部分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("请选择");
$.each(data, function(i,item){
var t = item.text, v = item.value, option = ""+t+"";
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);
}); 
});

相关推荐：

Endel.io

Endel是一款可以创造个性化舒缓声音的应用程序，可帮助您集中注意力、放松身心和入睡。

下载

js实现HTML中Select二级联动实例分享

AngularJS实现select二级联动下拉菜单步奏详解