JS二级、多级联动的简单实例

 本篇文章主要是对超简单JS二级、多级联动的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

超简单的JS联动代码,不过要配合jquery用,也可以自己修改为不用任选JS库的代码
 代码如下:
<tr>
  <th>一级分类</th><td>
    <select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
      <option>请选择</option>
    </select>
    <script language="javascript">
    var linkage_data={$list_file_category};//初始化级联数据,{$list_file_category}是PHP的JSON_ENCODE的数据,数组有3个数据,id,parent_id,name
    function linkage(parent_dom,son_dom){
        var parent_id=0;
        if(parent_dom){
            parent_id=$(parent_dom).val();    
        }
        $(son_dom).empty();//先清空下拉
        var html='<option>请选择</option>';
        $.each(linkage_data,function(key,value){
            if(value.parent_id==parent_id){
                html+="<option value='"+value.id+"'>"+value.name+"</option>";
            }
        });
        $(son_dom).append(html);
    }
    linkage('',".subsidiary_cat_id")//不传上级节点,表示为第一级数据
    </script>
    </td></tr>
<tr><th>二级目录</th><td>
  <select name="cat_id" class="cat_id">
    <option>请选择</option>
  </select></td></tr>
 
 

时间: 2024-09-20 00:34:15

JS二级、多级联动的简单实例的相关文章

超简单JS二级、多级联动的简单实例_javascript技巧

超简单的JS联动代码,不过要配合jquery用,也可以自己修改为不用任选JS库的代码 复制代码 代码如下: <tr>  <th>一级分类</th><td>    <select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">   

Spring MVC中Ajax实现二级联动的简单实例_jquery

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

JS 日期比较大小的简单实例

 本篇文章主要是对JS日期比较大小的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1,比较日期大小的js代码  代码如下: <script> var beginDate=$("#beginDate").val();    var endDate=$("#endDate").val();    var d1 = new Date(beginDate.replace(/-/g, "/"));    var d2 = n

js实现楼层效果的简单实例_javascript技巧

今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

js window.open()参数与简单实例应用

js window.open()参数与简单实例应用 window.open()方法中,窗口控制参数的详细定义: alwayslowered innerwidth screeny alwaysraised left scrollbars channelmode location status dependent menubar titlebar directories outerwidth toolbar fullscreen outerheight top height menubar widt

JS获取checkbox的个数简单实例_javascript技巧

JS获取多选框checkbox被选中的个数. var checkbox = document.getElementsByName("likes[]"); //此处通过此种方式才能获得多选框为数组. //like为name = "like[]" , 获得时必须加上[] var checked_counts = 0; for(var i=0;i<checkbox.length;i++){ if(checkbox[i].checked){ //被选中的checkbo

JS添加删除DIV的简单实例_javascript技巧

JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有"divCell"这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body.appendChild(my); //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.s

js实现弹窗居中的简单实例_javascript技巧

在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500px; } .mid-tanBox{ position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none } html代码 <div class=

JS 数字转换为大写金额的简单实例_javascript技巧

JS 数字转换为大写金额的简单实例 function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "数据非法"; var unit = "千百拾亿千百拾万千百拾元角分", str = ""; n += "00"; var p = n.indexOf('.'); if (p >= 0) n = n.substring(0, p) + n.substr(p+1,