select option操作大全

最新推荐文章于 2022-09-19 15:26:26 发布

chenhaiyang_ok

最新推荐文章于 2022-09-19 15:26:26 发布

阅读量205

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/chenhaiyang_ok/article/details/84385660

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options：
function delAllOptions(){
document.getElementByIdx("user_dm").options.length=0;
}

//动态删除select中的某一项option：
function delOneOption(indx){
document.getElementByIdx("user_dm").options.remove(indx);
}

// 动态添加select中的项option:
function addOneOption(){
//document.getElementByIdx("user_dm").options.add(new Option(2,"mytest"));

var selectObj=document.getElementByIdx("user_dm");
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option("mytest", "2");
}
</script>
</head>
<body>
<select id="user_dm" name="user_dm">
<option value="0" selecte>==请选择人员==</option>
<option value="1">test</option>
</select><br>
<input type="button" onClick="addOneOption()" value="添加">
<input type="button" onClick="delOneOption(1)" value="删除第一个">
<input type="button" onClick="delAllOptions()" value="清空">
</body>
</html>
========================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js动态添加与删除Option对象</TITLE>
<script language="JavaScript">
// 添加选项
function addOption(pos){
var objSelect=document.getElementByIdx("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option("aaaaaaaa","bbbbbbbbb");
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}

// 删除
function deleteOption(type){
var objSelect=document.getElementByIdx("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(){
var objSelect=document.getElementByIdx("mySelect");
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}

//动态删除select中的所有options：
function clearAllOptions(){
var objSelect=document.getElementByIdx("mySelect");
objSelect.options.length=0;
}
</script>
</HEAD>
<BODY>
<h2>Js动态添加与删除Option对象</h2>
<hr>