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>