html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
display: inline-block;
}
select{
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<select id="select" size="10">
<option value="1">第1个</option>
<option value="2">第2个</option>
<option value="3">第3个</option>
<option value="4">第4个</option>
<option value="5">第5个</option>
<option value="6">第6个</option>
<option value="7">第7个</option>
<option value="8">第8个</option>
<p>hello</p>
</select>
<br>
<button id="btn_up">向上移动</button>
<button id="btn_down">向下移动</button>
</div>
<script src="./js/移动option.js"></script>
</body>
</html>
JS部分：
(function() {
var selectObj = document.getElementById('select');
var btnUp = document.getElementById('btn_up');
var btnDown = document.getElementById('btn_down');
btnUp.onclick = function() {
// 先把当前被选中的option用selectedOption表示出来
var selectedOption = selectObj.options[selectObj.selectedIndex];
// 判断当前选中的option是否是第一个option
if(selectObj.selectedIndex === 0) {
moveLast(selectedOption);
} else {
movePrev(selectedOption, selectObj.selectedIndex);
}
};
btnDown.onclick = function() {
// 先把当前被选中的option用selectedOption表示出来
var selectedOption = selectObj.options[selectObj.selectedIndex];
// 判断当前选中的option是否是最后一个option
if(selectObj.selectedIndex === selectObj.options.length - 1) {
moveFirst(selectedOption);
} else {
moveNext(selectedOption, selectObj.selectedIndex);
}
};
// 直接向下移动一项
function moveNext(obj, objIndex) {
obj.parentNode.insertBefore(obj, obj.parentNode.options[objIndex + 2]);
}
// 直接向上移动一项
function movePrev(obj, objIndex) {
obj.parentNode.insertBefore(obj, obj.parentNode.options[objIndex - 1]);
}
// 移动到开头
function moveFirst(obj) {
obj.parentNode.insertBefore(obj, obj.parentNode.options[0]);
}
// 移动带结尾
function moveLast(obj) {
obj.parentNode.appendChild(obj);
}
})();
浙公网安备 33010602011771号