本文提供了一个使用HTML和JavaScript实现的下拉菜单选项动态操作的示例，包括添加、修改和删除选项等功能，有助于理解如何通过JavaScript操作DOM元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>哈哈.我叫刘冰,交个朋友OK?激情,QQ.女人.</title>
</head>
<script language="javascript" type="text/javascript">
<!--
function modfiyOption(sel)
{
try
{
var labl=document.getElementById("typevalue");
labl.innerText=sel.options[sel.selectedIndex].text;
var but=document.getElementById("modifyOk");
var but2=document.getElementById("deleteOk");
but.alt=sel.id;but2.alt=sel.id;
but.title=sel.selectedIndex;but2.title=sel.selectedIndex;
}
catch(err)
{
//这里捕获异常
}
}
function blankNewValue(str)
{
var hid=document.getElementById("hidType");
hid.value=str;
}
function modify(selectID,optionID)
{
if(selectID == "selectID")
{
alert("您还没有选择要修改的产品类型") ;
return ;
}
var hid=document.getElementById("hidType");
var sel=document.getElementById(selectID);
sel.options[optionID].innerText=hid.value;
}
function deleteOption(selectID,optionID)
{
if(selectID == "selectID")
{
alert("您还没有选择要删除的产品类型") ;
return ;
}
var sel=document.getElementById(selectID);
sel.options.remove(optionID);
}
function blankAdd(sel)
{
var addBut=document.getElementById("addOk");
addBut.alt=sel.options[sel.selectedIndex].text;
}
function addOption(_alt)
{
var key=document.getElementById("key");
var value1=document.getElementById("value");
var opt=document.createElement("option");
opt.value=key.value;
opt.innerHTML=value1.value;
document.getElementById(_alt).appendChild(opt);
}
//-->
</script>
<body>
<table width="100%" border="0" bgcolor="#00FF33">
<tr>
<td align="center">子类型最多支持4层</td>
</tr>
</table>
<table width="200" border="0" align="center">
<tr>
<td>
<select id="type1" name="select1" multiple="multiple" size="6" onclick="modfiyOption(this);">
<option value="zhmy">张曼玉 </option>
<option value="wf" selected="selected">王菲 </option>
<option value="tzh">田震 </option>
<option value="ny">那英 </option>
<option value="ny">那英 </option>
<option value="ny">那英 </option>
</select><br>type1</td>
<td><h2>→</h2></td>
<td><select id="type2" name="gx2" multiple size="6" onclick="modfiyOption(this); ">
<option value="zhmy">张曼玉 </option>
<option value="wf" selected>王菲 </option>
<option value="tzh">田震 </option>
<option value="ny">那英 </option>
</select><br>type2</td>
<td><h2>→</h2></td>
<td><select id="type3" name="select2" multiple="multiple" size="6" onclick="modfiyOption(this);">
<option value="zhmy">张曼玉 </option>
<option value="wf" selected="selected">王菲 </option>
<option value="tzh">田震 </option>
<option value="ny">那英 </option>
</select><br>type3</td>
<td><h2>→</h2></td>
<td><select id="type4" name="select3" multiple="multiple" size="6" onclick="modfiyOption(this);">
<option value="zhmy">张曼玉 </option>
<option value="wf" selected="selected">王菲 </option>
<option value="tzh">田震 </option>
<option value="ny">那英 </option>
</select><br>type4</td>
</tr>
</table>
<table align="center">
<tr>
<td colspan="2"><input type="text" id="typevalue" style="color:#FF0000" onchange="blankNewValue(this.value);"></input><input type="hidden" id="hidType" value="没有文本" /></td>
<td><input type="button" value="修改" id="modifyOk" alt="selectID" title="optionID" onclick="modify(this.alt,this.title)" /></td>
<td> </td>
<td><input type="button" value="删除" id="deleteOk" alt="selectID" title="optionID" onclick="deleteOption(this.alt,this.title);" /></td>
</tr>
</table>
<table align="center">
<form name="form3" action="#" method="post">
<tr>
<td>
<select name="selType" id="selType" onchange="blankAdd(this);">
<option value="type1" selected="selected">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
<option value="type4">type4</option>
</select>
</td>
<td>key :<input type="text" id="key"/></td>
<td>value :<input type="text" id="value"/></td>
<td><input type="button" value="添加" id="addOk" alt="type1" onclick="addOption(this.alt)" /></td>
</tr>
</form>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
