SELECT OPTION 向上、下移动、增加、删除_vue3 select下拉框向上展示-优快云博客

本文介绍了一个使用JavaScript实现的下拉菜单选项动态操作的功能，包括增加、删除、上移和下移选项。通过简单的HTML和JavaScript代码展示了如何在网页上实现这些交互效果。

<html>
<head>
<title>Options</title>
<script type="text/javascript">
function addOption(obj) {
 if (!document.createElement) return;

 var selIdx = obj.selectedIndex;
 var selNum = obj.options.length;
 var opt = selIdx >= 0 ? obj.options[selIdx] : null;
 
 if (selIdx < 0) selIdx = selNum;
 var newOpt = document.createElement("option");
 newOpt.value = ((selNum + 1) + "") + ((selNum + 1) + "") + ((selNum + 1) + "");
 newOpt.appendChild(document.createTextNode(newOpt.value));

 obj.insertBefore(newOpt, obj.options[selIdx]);
}
function delOption(obj) {
 var selIdx = obj.selectedIndex;
 var selNum = obj.options.length;
 var opt = selIdx >= 0 ? obj.options[selIdx] : null;
 //alert(opt.value);
 if (selIdx >= 0 && selIdx < selNum) {
  obj.options[selIdx] = null;
 }
}
function upOption(obj) {
 var selIdx = obj.selectedIndex;
 var selNum = obj.options.length;
 var opt = selIdx >= 0 ? obj.options[selIdx] : null;
 //alert(opt.value);
 if (selIdx > 0) {
  obj.insertBefore(opt, obj.options[selIdx-1]);
 }
}
function downOption(obj) {
 var selIdx = obj.selectedIndex;
 var selNum = obj.options.length;
 var opt = selIdx >= 0 ? obj.options[selIdx] : null;
 //alert(opt.value);
 if (selIdx < 0 || selIdx == selNum - 1) {
 } else {
  obj.insertBefore(opt, obj.options[selIdx+2]);
 }
}
</script>
</head>
<body>
<form action="#">
<select name="selList" size="10">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
<input type="button" value="增加" onclick="addOption(this.form.selList);">
<input type="button" value="向上" onclick="upOption(this.form.selList);">
<input type="button" value="向下" onclick="downOption(this.form.selList);">
<input type="button" value="删除" onclick="delOption(this.form.selList);">
</form>
</body>
</html>