实现option上下移动_jQuery操作Select的Option上下移动及移除添加等等

jQuery操作Select Option：向上移动选中的option、向下移动选中的option、移除选中的option、获取所有的option值、添加option等等，下面有个不错的示例，感兴趣的朋友不要错过

/**

* 向上移动选中的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('当前被选中的text=' + checkText + ', value=' + checkValue);

var ids = '';

var options = $('#where')[0].options;

for(var i=0; i

ids = ids + '`' + options[i].id;

}

alert('当前被选中的编号顺序为' + ids);

}

/**

* 添加option

*/

function addSelectedOption(){

//添加在第一个位置

$('#where').prepend('Haerbin');

//添加在最后一个位置

$('#where').append('HeiLongJiang');

$('#where').attr('size', 7);

}

Hong Kong

Taiwan

China

United States

Canada