SELECT OPTION 向上、下移动、增加、删除

最新推荐文章于 2023-11-15 15:11:05 发布

jiangxiuwu

最新推荐文章于 2023-11-15 15:11:05 发布

阅读量635

点赞数

分类专栏： j2ee 文章标签： 2 javascript

j2ee 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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="增加" οnclick="addOption(this.form.selList);">
<input type="button" value="向上" οnclick="upOption(this.form.selList);">
<input type="button" value="向下" οnclick="downOption(this.form.selList);">
<input type="button" value="删除" οnclick="delOption(this.form.selList);">
</form>
</body>
</html>