3级联动

 

页面如下：使用的是springmvc的标签

父目录

<form:select id="parentCatalog" path="product.parentCatalogId" class="h30-select blueFocus w250 fl f12">
　　<form:option value="-1">- 选择类别父目录 -</form:option>
　　<form:options items="${parentCatalogList}" itemValue="id" itemLabel="cnName"/>
</form:select>

子目录
<form:select id="subcatalog" class="h30-select blueFocus w250 fl ml10 f12" path="product.catalogId">
</form:select>

报关编码

 <input id="declareCode" type="text" name="declareCode"  class="h28-text blueFocus w300" placeholder=""/>

 

js代码

//商品父目录子目录及报关编码三级联动

//商品父目录子目录及报关编码三级联动
$(function(){
    if ($("#parentCatalog").val() != -1) {
        $("#parentCatalog").trigger('change');
        $("#subcatalog").trigger('change');
    }
    $("#parentCatalog").change(function(){
        var children = $("#subcatalog");
        children.empty();
        var parentId = $(this).val();
        if (parentId == -1) {
            children.append("<option value='-1'>- 选择类别子目录 -</option>");
            $("#subcatalog").trigger('change');
        }else{
            //从缓存总拿
            var cacheData = children.data(parentId);
            //如果缓存里面有就从缓存里面取
            if(cacheData){
                for (var int = 0; int < cacheData.length; int++) {
                    children.append("<option value='"+cacheData[int].id+"'>"+cacheData[int].cnName+"</option>");
                }
                $("#subcatalog").trigger('change');
            }else{
                
                //如果缓存没有发请求 到后台去拿
                $.get("<%=request.getContextPath()%>/product/getSubcatalogList",{parentId:parentId},function(data){
                    // 将数据缓存
                    children.data(parentId,data);
                    for (var i = 0; i < data.length; i++) {
                        children.append("<option value='"+data[i].id+"'>"+data[i].cnName+"</option>");
                    }
                    //手动触发第三个的change事件
                    $("#subcatalog").trigger('change');
                });
            }
        }
    });
    $("#subcatalog").change(function(){
        var declareCode = $("#declareCode");
        var id = $(this).val();
        if(id == -1 || id == null){
            $("#declareCode").val("");
            return;
        }
        //先从缓存拿数据
        var declareCodeCacheData = declareCode.data(id)
        if (declareCodeCacheData) {
            $("#declareCode").val(declareCodeCacheData);
        }else{
            $.get("<%=request.getContextPath()%>/product/getDeclareCodeByCatalogId",{id:id},function(data){
                if(data){
                    declareCode.data(id,data);
                    $("#declareCode").val(data);
                }
            })
        }
    });
});

// checkBox 选中传1 未选择传2的方法
function checkBox(obj,num){
    if(obj.checked){
        $(".specialProperty"+num).val(1);
      }else{
        $(".specialProperty"+num).val(2); 
    }
};
function checkBoxing(obj,num){
    if (obj.checked) {
        $("#autoCalHiddenInput"+num).val(1);
        $(obj).val(1);
    }else{
        $("#autoCalHiddenInput"+num).val(2);
        $(obj).val(2);
    }
};

 

 

2、checkbox 相关操作，选中传1 不选传2
function checkBox(obj,num){
if(obj.checked){
$(".specialProperty"+num).val(1);
}else{
$(".specialProperty"+num).val(2);
}
};
function checkBoxing(obj,num){
if (obj.checked) {
$("#autoCalHiddenInput"+num).val(1);
$(obj).val(1);
}else{
$("#autoCalHiddenInput"+num).val(2);
$(obj).val(2);
}
};