jQuery操作SelectOption上下移动

效果是这样的
这里主要是通过jQuery实现对<select>标签的上下移动、添加、删除、获取Option的值等功能
代码是这样的
<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery操作SelectOption上下移动</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-99-y/jquery/1.2.3/jquery.min.js" type="application/javascript"></script>
</head>
<script>
/**
 * 向上移动选中的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<options.length; i++){
        ids = ids + '`' + options[i].id;
    }
    alert('当前被选中的编号顺序为' + ids);
}

/**
 * 添加option
 */
function addSelectedOption(){
    //添加在第一个位置
    $('#where').prepend('<option value="hbin" id="where06">Haerbin</option>');
    //添加在最后一个位置
    $('#where').append('<option value="hlj" id="where07">HeiLongJiang</option>');
    $('#where').attr('size', 7);
}
</script>
<body>
    <div id="updown">
        <select id="where" name="where" size="5">
            <option value="hk" id="where01">Hong Kong</option>
            <option value="tw" id="where02">Taiwan</option>
            <option value="cn" id="where03">China</option>
            <option value="us" id="where04">United States</option>
            <option value="ca" id="where05">Canada</option>
        </select>
    </div>
    <br/>
    <input type="button" value="上移" onclick="upSelectedOption()"/>
    <input type="button" value="下移" onclick="downSelectedOption()"/>
    <input type="button" value="删除" onclick="removeSelectedOption()"/>
    <input type="button" value="确定" onclick="getSelectedOption()"/>
    <input type="button" value="添加" onclick="addSelectedOption()"/>
</body>
</html>