1.遍历整个下拉选项,删除指定项
使用selectObj.options[i]和remove()方法
<html>
<script language="javascript">
//document.onreadystatechange = init;
function del() {
var relaWApObj = document.forms[0].relaWithAppl;
if(relaWApObj != null){
for(var i=relaWApObj.options.length-1; i>=0; i--) {
if(relaWApObj.options[i].text == "其他" || relaWApObj.options[i].text == "法定") {
relaWApObj.remove(i);
}
}
}
}
</script>
<body>
<form >
关系:<select name="relaWithAppl" οnchange="javascript:void(0);">
<option value="301">本人</option>
<option value="302">法定</option>
<option value="303">母女</option>
<option value="304">父女</option>
<option value="306">母子</option>
<option value="309">父子</option>
<option value="310">夫妻</option>
<option value="311">其他</option>
</select>
</form>
<input type="button" value="删除" οnclick="del();"/>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
2.使用selectedIndex 属性操作下拉框
1).selectedIndex:可设置或返回下拉列表中被选选项的索引号(从零开始)。
【注意】:若允许多重选择,则仅会返回第一个被选选项的索引号。
设置多重选中:document.getElementById("mySelect").multiple=true
2).建立Option对象:var objOption = new Option(textName,valueName);
或者var option=document.createElement("option"); option.text="猕猴桃";option.value="猕猴桃";
3).disabled属性:可设置或返回是否禁用下拉列表。(禁用了就变成灰色,不可选择)
document.getElementById("mySelect").disabled=true或false;
4).length 属性:可返回下拉列表中选项的数目
document.getElementById("mySelect").options.length
5).add()方法:方法用于向 <select> 添加一个 <option> 元素
语法:
selectObject.add(option,before)
option 必需。要添加选项元素。必需是 option 或 optgroup 元素。
before 必需。
详见下面的3.关于add()方法
6).remove():用于从下拉列表删除选项
7).onchange事件:当改变选择时调用的事件句柄.如:<select name="mySelect" οnchange="deleteOption(true)">
--------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>添加与删除Option对象</title>
<script language="javascript">
//1. 添加选项(add方法)
function addOption(pos){
var objSelect = document.myForm.mySelect;
// 取得字段值
var strName = document.myForm.myOptionName.value;
var strvalue = document.myForm.myOptionvalue.value;
// 建立Option对象
var objOption = new Option(strName,strvalue);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption; //添加到最后一个位置
else
objSelect.add(objOption, pos); //使用add方法在指定位置插入
}
//2. 删除选项(两种方法)
function deleteOption(type){
var objSelect = document.myForm.mySelect;
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
//3. 显示选项信息
function showOption(objForm){
var objSelect = objForm.mySelect;
var name = objSelect.options[objSelect.selectedIndex].text; //获取当前选中项的显示值
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
</script>
</head>
<body>
<h2>添加与删除Option对象</h2>
<hr>
<form name="myForm">
<select name="mySelect">
<option value="中国1" Selected>中国</option>
<option value="日本1">日本</option>
<option value="美国1">美国</option>
</select>
<input type="button" οnclick="showOption(this.form)" value="显示">
<input type="button" οnclick="deleteOption(true)" value="删除">
<input type="button" οnclick="deleteOption(false)" value="Remove方法"><br><br>
选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionvalue" value="value4">
<input type="button" οnclick="addOption(-1)" value="添加">
<input type="button" οnclick="addOption(0)" value="插入">
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------
3.关于add()方法:
1)、把一个选项添加到下拉列表的末尾
在选项数组的该元素之前增加新的元素。如果该参数是null,元素添加到选项数组的末尾。
<html>
<head>
<script type="text/javascript">
function insertOption()
{
var y=document.createElement('option');//在对象中创建一个对象
y.text='Kiwi'
var x=document.getElementById("mySelect");
try
{
x.add(y,null); // standards compliant
}
catch(ex)
{
x.add(y); // IE only
}
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" οnclick="insertOption()" value="Insert option" />
</form>
</body>
</html>
2)、在下拉列表selected的选项之前添加一个选项
<html>
<head>
<script type="text/javascript">
function insertBeforeSelected()
{
var x=document.getElementById("mySelect");
if (x.selectedIndex>=0)
{
var option=document.createElement("option");
option.text="猕猴桃";
var sel=x.options[x.selectedIndex];
try
{
x.add(option,sel);
}
catch(ex)
{
// IE 早期版本和IE8
x.add(option,x.selectedIndex);
}
}
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>橘子</option>
<option>菠萝</option>
<option>香蕉</option>
</select>
<input type="button" οnclick="insertBeforeSelected()" value="在被选中项前添加项" />
</form>
<p><b>提示:</b>add()方法需要添加 !DOCTYPE在IE8和高版本中,同时也要注意为IE8前的版本的兼容性代码。</p>
</body>
</html>