[jQuery] html中两个select之间option元素的add与remove,多值上传

网页代码
<form class="form2">
<span class="left"> 
        <b>one</b><br /> 
<select size="8" id="select_1" name="select_1[]" multiple="multiple"> 
<option value="1">niaoren_1</option> 
<option value="2">niaoren_2</option> 
<option value="3">niaoren_3</option> 
<option value="4">niaoren_4</option> 
<option value="5">niaoren_5</option> 
</select> 
</span> 

<input type="button" value="Add" title="add" id="add_em" /> 
<input type="button" value="Remove" title="remove" id="remove_em" />

<span class="left"> 
<b>two</b><br /> 
<select size="8" id="select_2" name="select_2[]" multiple="multiple"> 
<option value="6">niaoren_6</option> 
<option value="7">niaoren_7</option> 
<option value="8">niaoren_8</option> 
<option value="9">niaoren_9</option> 
<option value="10">niaoren_10</option> 
</select> 
</span>
<br class="clear" />
<input type="button" value="Update" name="yt0" onclick="setAllSelected()"/>
</form>

jQuery代码

//对增加按钮进行事件绑定
$('#add_em').click(
function() 
{
if($("#select_1 :selected").length>0)
{
$("#select_1 option:selected").each(
function()
{
$("#select_2").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();  
}
)
}
}
);
//对移除按钮进行事件绑定
$('#remove_em').click(
function() 
{
if($("#select_2 :selected").length>0)
{
$("#select_2 option:selected").each(
function()
{
$("#select_1").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();  
}
)
}
}
);

function setAllSelected()
{
//这里这先对两个select表的所有元素进行选中后,才好提交,要不然就传不过去了
$('#select_1').children().each(function(){$(this).attr('selected', 'true')});
$('#select_2').children().each(function(){$(this).attr('selected', 'true')});
//ajax提交
$.ajax({
'success':function(rs){ $("#ajax_msg").text(rs);},
'type':'POST',
'url':"/index.php",
'cache':false,
'data':$(".form2").serialize()
});
}
posted @ 2010-04-21 11:10  DavidHHuan  阅读(4470)  评论(1编辑  收藏  举报