<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();