jquery 动态添加删除二级联动

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
var configs = {
    parent_iframe : '.window_url',
    remark_count : 100,
    makesure_url : '/_u/finance/accountscheck/collateinfo',
    options_type : {
        SelStrSet: [
        { name: '请选择', value: '0', subname: '请选择', subvalue: '0'},
        { name: '线下收付款', value: '01', subname: '线下收款(手工充值)|线下付款(手工提现)|隔日退票|隔日退票转线下付款', subvalue: '01|02|03|04' },
        { name: '测试', value: '02', subname: '测试收款、测试退款、测试打款|测试退票', subvalue: '05|06' },
        { name: '银行错账', value: '03', subname: '银行错账(网银金额大于清算文件金额,资金有误)|银行错账(网银金额小于清算文件金额,资金有误)|银行错账(网银金额大于清算文件金额,清算文件错)|消去前期银行错账(网银金额小于清算文件金额,资金有误)|消去前期银行错账(网银金额大于清算文件金额,资金有误)|银行错账(网银金额小于清算文件金额,清算文件错)', subvalue: '07|08|09|10|11|12' },
        { name: '时间差', value: '04', subname: '银行到账与我方对账时间差|退款资金实时退我方T+1对账|线上付款,银行与我方记账时间差', subvalue: '13|14|15' },
        { name: '汇总文件付款', value: '05', subname: '汇总文件付款方式完成的退款|汇总文件付款,今日未把结果文件回导系统|汇总文件付款,补前期的回导', subvalue: '16|17|18' },
        { name: '退款退回', value: '06', subname: '退款退回(置失败)|退款退回(系统已置成功,需要转线下打款)|退款退回转线下打款', subvalue: '19|20|21' },
        { name: '误收款', value: '07', subname: '误收款|误收款退回', subvalue: '22|23' },
        { name: '当日撤销', value: '08', subname: '当日撤销', subvalue: '24' },
        { name: '其它', value: '09', subname: '其它', subvalue: '25' }]
    }
};
// option 操作
function initOptions(now,next,reset){
    if (reset === undefined) {
        reset = false;
    }    
    now.children("option").remove();
    jQuery.each(configs.options_type.SelStrSet, function () {
        var options_tmp = this;
        if(reset){
            now.append("<option value=" + options_tmp.value + ">" + options_tmp.name + "</option>");
        }else{
            if( now.attr('require') == options_tmp.value ){
                now.append("<option value=" + options_tmp.value + " selected >" + options_tmp.name + "</option>");
            }else{
                now.append("<option value=" + options_tmp.value + ">" + options_tmp.name + "</option>");
            }
        }
    });
    selchage(now,next);
}
function selchage(now,next,reset) {
    if (reset === undefined) {
        reset = false;
    }    
    now.children("option").each(function (i, o) {
        if (jQuery(this).attr("selected")) {
            next.children("option").remove();
            var temp = configs.options_type.SelStrSet[i].subname.split("|");
            var temp2 = configs.options_type.SelStrSet[i].subvalue.split("|");
            for (k = 0; k < temp.length; k++) {
                if(reset){
                    next.append("<option value=" + temp2[k] + ">" + temp[k] + "</option>");
                }else{
                    if( next.attr('require') == temp2[k] ){
                        next.append("<option value=" + temp2[k] + " selected >" + temp[k] + "</option>");
                    }else{
                        next.append("<option value=" + temp2[k] + ">" + temp[k] + "</option>");
                    }                    
                }
            };
        };
    });
}
// prepare the form when the DOM is ready
jQuery(document).ready(function() {
    jQuery('select[name="diff_reasons_max[]"]').each(function(index,element){    
        initOptions(jQuery(this),jQuery(this).parent().parent().find('SELECT[name="diff_reasons_min[]"]'));    
    });
    jQuery('select[name="diff_reasons_max[]"]').live("change",function(){
        selchage(jQuery(this),jQuery(this).parent().parent().find('SELECT[name="diff_reasons_min[]"]'));
    });
    //删除操作
    jQuery(".delDiffType").live("click",function(){
        jQuery(this).parent().parent().remove();
    });
    //新增差异
    jQuery(".addDiff").click(function(e){
        var html = jQuery(".diffType")
                            .clone(false)
                            .removeClass('diffType')
                            .find('td:last')
                            .html('<button type="button" >删除</button>')                        
                            .end()
                            .find('.num-pallets-input')
                            .val('')
                            .end();
            var obj_max = html.find('SELECT[name="diff_reasons_max[]"]');                
            var obj_min = html.find('SELECT[name="diff_reasons_min[]"]');
            jQuery('SELECT[name="diff_reasons_max[]"]').last().parent("TD").parent("TR").after(html);
            initOptions(obj_max,obj_min,true);
    });    
});
</script>
</head>

<body>

<table>
                <tr>
                    <td>差异类型:</td>
                    <td><select name="diff_reasons_max[]" require="02" ></select></td>
                    <td><select name="diff_reasons_min[]" ></select></td>
                    <td>异常金额:</td>
                    <td><input type="text" name="diff_reasons_amount[]" /></td>
                    <td width="20%"></td>
                </tr>                

                <tr><td colspan="6" align="left"><button type="button">新增</button></td></tr>                
</table>
</body>
</html>

此条目发表在 jquery 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>