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>