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

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

一、总结

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

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

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

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

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

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

控件设置为disabled

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

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>
 
上一篇:[转载]给Jquery动态添加的元素添加事件


下一篇:给Jquery动态添加的元素添加事件