网页代码
<form class="form2">
<span class="left">
<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()
});
}
<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()
});
}