您的位置：首页 > 运维架构

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

2015-02-06 15:15 197 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 2 javascript

相关文章推荐

新的分享

章节导航