jquery如何实现动态增加选择框

jquery如何实现动态增加选择框

一、总结

一句话总结：用jquery的clone(true)方法。

1、如何在页面中复制amazeui加了特效的标签？

amazeui中的控件带js方法，不知道那部分js的情况下，只有不用功能才能方便用clone(true)复制

2、选兄弟选不到的时候怎么选元素？

通过父亲选儿子，照样可以达到相同的功能

3、表单中的控件如何让它不能提交过去？

控件设置为disabled

二、jquery如何实现动态增加选择框

<script>
    function taskRewardHidden(){
        $('div.goods').hide();
        $('div.goods').find($('select')).attr({'disabled':'disabled'});
        $('div.attribute').hide();
        $('div.attribute').find($('select')).attr({'disabled':'disabled'});
    }
    taskRewardHidden();
    $('div.attribute').show();
    $('div.attribute').find($('select')).removeAttr('disabled');

    //把作为复制之用的那个item的所有东西都设置为disabled，避免提交
    //$('.task_reward_list_item:first').find($('select,input[type=number]')).attr({'disabled':'disabled'});

    $('div.reward_type').children("select").change(function () {
        //$(this)就有选出来的就有问题
        var type=$(this).val();
        //alert($(this).html());
        //alert($(this).parent().parent().children('.goods').html());
        $(this).parent().parent().children('.goods').hide();
        $(this).parent().parent().children('.goods').find($('select')).attr({'disabled':'disabled'});
        $(this).parent().parent().children('.attribute').hide();
        $(this).parent().parent().children('.attribute').find($('select')).attr({'disabled':'disabled'});
        $(this).parent().parent().children('.'+type).show();
        $(this).parent().parent().children('.'+type).find($('select')).removeAttr('disabled');

        //taskRewardHidden();
        //$('div.'+type).show();
    });

    //增加一个隐藏的task_reward_list_item做复制之用
    $('.task_btn_addReward').click(function () {
        //把作为复制之用的那个item的所有东西都设置的disabled移去，方便复制
        $('.task_reward_list_item:first').find($('select,input[type=number]')).removeAttr('disabled');
        //复制过来的东西因为只显示了属性，所以还要把物品设置成disabled
        $('.task_reward_list_item:first').find($('div.goods').find($('select'))).attr({'disabled':'disabled'});
        //复制
        var new_task_reward_list_item=$('.task_reward_list_item:first').clone(true);

        //var new_task_reward_list_item=$('.task_reward_list_item:first').find($('select,input[type=number]')).removeAttr('disabled').end().clone(true);
        //显示
        new_task_reward_list_item.show().animate({
            'top': '-500px', opacity: '0.5'
        }, 1);
        $('div.task_reward_list_group').animate({
            borderWidth: 15
        },10);
        new_task_reward_list_item.animate({
            'top': '0', opacity: '1'
        }, 500,'swing');
        //alert($('div.task_reward_list_group').length);
        $('div.task_reward_list_group').css({
            'border-bottom': '5px groove'
        });
        $('div.task_reward_list_group').animate({
            borderWidth: 15
        },499);
        $('div.task_reward_list_group').animate({
            borderWidth: 7
        },1);
        new_task_reward_list_item.animate({
            'top': '-130px', opacity: '1'
        }, 200,'linear');
        new_task_reward_list_item.animate({
            'top': '0', opacity: '1'
        }, 200,'linear');
        $('div.task_reward_list_group').animate({
            borderWidth: 7
        },399);
        $('div.task_reward_list_group').animate({
            borderWidth: 3
        },1);
        new_task_reward_list_item.animate({
            'top': '-65px', opacity: '1'
        }, 200,'linear');
        new_task_reward_list_item.animate({
            'top': '0', opacity: '1'
        }, 200,'linear');
        $('div.task_reward_list_group').animate({
            borderWidth: 3
        },399);
        $('div.task_reward_list_group').animate({
            borderWidth: 1.5
        },1);
        new_task_reward_list_item.animate({
            'top': '-30px', opacity: '1'
        }, 200,'linear');
        new_task_reward_list_item.animate({
            'top': '0', opacity: '1'
        }, 200,'linear');
        $('div.task_reward_list_group').animate({
            borderWidth: 1.5
        },399);
        $('div.task_reward_list_group').animate({
            borderWidth: 0
        },1);

        //alert($('.task_reward_list_item:first').find($('select,input[type=number]')).length);
        //alert(new_task_reward_list_item.html());
        //alert(new_task_reward_list_item.html());
        $('.task_reward_list_group').append(new_task_reward_list_item);
        //把作为复制之用的那个item的所有东西都设置为disabled，避免提交
        $('.task_reward_list_item:first').find($('select,input[type=number]')).attr({'disabled':'disabled'});

        //把第一个奖励列表数据拿来用用
    });

    //关闭方法

    $('.task_reward_list_item_close').click(function () {
        //alert($('.task_reward_list_item_close').length);
        //alert($('.task_reward_list_item_close').eq(0));
        //alert($(this).parent().index());
        //找出它的索引号，判断索引号是不是0来解决
        //比较用数字来比较比较好
        if($(this).parent().index()==1) alert('第一个不能删！');
        else{
            $(this).parent().hide();
            //alert($(this).parent().find($('select,input[type=number]')).length);
            $(this).parent().find($('select,input[type=number]')).attr({'disabled':'disabled'});
        }
        //隐藏的元素不让传参数
    });

    //执行js的时候，php早走完了，所以选项只有一份，当时可以通过dom把数据弄过来
    //以为这里涉及到amaze ui里面的js，所以会出错
    //不用amaze ui的这个选择框特效就特别好做了

</script>