jquery 两个select控件左右移动并上下移动

<script type="text/javascript" src="jquery-1.3.2.min.js" />

<table boder='1'>

<tr>

<th>待选字段</th>

<td></td>

<th>报表导出字段</th>

</tr>

<tr>

<td><select name="selectOne" size="5" multiple style="height:300px!important; width:150px;">

<?php foreach($arrFieldName as $key=>$val){?>

<option val="<?php echo $key;?>"><?php echo $val;?></option>

<?php }?>

</select></td>

<td style="width:100px; text-align:center;"><input type="button" id="buttonToRight" value="»" style="background:none; width:50px;" />

<br/>

<br/>

<input type="button" value="«" id="buttonToLeft" style="background:none; width:50px;" />

<br/>

<br/>

<input type="button" value="↑" id="buttonToUp" style="background:none; width:50px;" />

<br/>

<br/>

<input type="button" value="↓" id="buttonToDown" style="background:none; width:50px;" />

</td>

<td><select name="selectTwo" size="5" multiple style="height:300px!important; width:150px;">

</select></td>

</tr>

<tr>

<td ></td>

<td><a class="button"><span class="icon icon-output">确认导出</span></a></td>

<td></td>

</tr>

</table>

<script type="text/javascript">

$(function(){

$('#buttonToRight').click(function(){

if($("select[name=selectOne] option:selected").length>0){

$("select[name=selectOne] option:selected").each(function(i){

$("select[name=selectTwo]").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); //从左移到右边

$(this).remove(); //左边的删除

});

}

});

$('#buttonToLeft').click(function(){

if($("select[name=selectTwo] option:selected").length>0){

$("select[name=selectTwo] option:selected").each(function(i){

$("select[name=selectOne]").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

$(this).remove();

});

}

});

$('#buttonToUp').click(function(){

if($("select[name=selectTwo] option:selected").length>0){

$("select[name=selectTwo] option:selected").each(function(i){

$(this).prev().before($(this)); //上移

});

}

});

$('#buttonToDown').click(function(){

if($("select[name=selectTwo] option:selected").length>0){

$("select[name=selectTwo] option:selected").each(function(i){

$(this).next().after($(this));

$(this).insertAfter($(this).next()); //下移

});

}

});

});

</script>

获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();

获取select选中的 value:
$("#ddlRegType ").val();

获取select选中的索引:
$("#ddlRegType ").get(0).selectedIndex;

设置select 选中的索引：
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：
$("#ddlRegType ").get(0).value = value;

//select option的数量
("#ddlRegType option").length;

$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:
$("#ddlRegType ").empty();