復(fù)制代碼 代碼如下:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

<script type="text/javascript">
/**
* 向上移動選中的option
*/
function upSelectedOption(){
if(null == $('#where').val()){
alert('請選擇一項');
return false;
}
//選中的索引,從0開始
var optionIndex = $('#where').get(0).selectedIndex;
//如果選中的不在最上面,表示可以移動
if(optionIndex > 0){
$('#where option:selected').insertBefore($('#where option:selected').prev('option'));
}
}

/**
* 向下移動選中的option
*/
function downSelectedOption(){
if(null == $('#where').val()){
alert('請選擇一項');
return false;
}
//索引的長度,從1開始
var optionLength = $('#where')[0].options.length;
//選中的索引,從0開始
var optionIndex = $('#where').get(0).selectedIndex;
//如果選擇的不在最下面,表示可以向下
if(optionIndex < (optionLength-1)){
$('#where option:selected').insertAfter($('#where option:selected').next('option'));
}
}

/**
* 移除選中的option
*/
function removeSelectedOption(){
if(null == $('#where').val()){
alert('請選擇一項');
return false;
}
$('#where option:selected').remove();
}

/**
* 獲取所有的option值
*/
function getSelectedOption(){
//獲取Select選擇的Text
var checkText = $('#where').find('option:selected').text();
//獲取Select選擇的Value
var checkValue = $('#where').val();
alert('當(dāng)前被選中的text=' + checkText + ', value=' + checkValue);
var ids = '';
var options = $('#where')[0].options;
for(var i=0; i<options.length; i++){
ids = ids + '`' + options[i].id;
}
alert('當(dāng)前被選中的編號順序為' + ids);
}

/**
* 添加option
*/
function addSelectedOption(){
//添加在第一個位置
$('#where').prepend('<option value="hbin">Haerbin</option>');
//添加在最后一個位置
$('#where').append('<option value="hlj">HeiLongJiang</option>');
$('#where').attr('size', 7);
}
</script>

<div>
<select size="5">
<option value="hk">Hong Kong</option>
<option value="tw">Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</div>
<br/>
<input type="button" value="上移"/>
<input type="button" value="下移"/>
<input type="button" value="刪除"/>
<input type="button" value="確定"/>
<input type="button" value="添加"/>