javascript 实现对4层复选列表的添删改
2008-03-12 22:27
225 查看
<!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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android仿QQ好友列表分组实现增删改及持久化
- Android仿QQ好友列表分组实现增删改及持久化
- javascript实现下拉列表框显示（输入拼音头显示选项）
- javascript实现文字列表无缝向上滚动
- JavaScript实现LI列表数据绑定的方法
- Javascript通过单选、复选、下拉列表获取数据
- javascript实现表格增删改操作实例详解
- SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表
- javascript实现的LI列表输出，隔行同色的代码
- javascript下拉列表中显示树形菜单的实现方法
- Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu
- javascript实现通过拼音首字母快速选择下拉列表
- javascript实现列表的点击展开折叠
- 数据结构:JavaScript实现列表
- JavaScript实现LI列表数据绑定的方法
- Javascript 生成无限下拉列表实现代码
- javaScript实现下拉列表的选定
- JavaScript实现带播放列表的音乐播放器实例分享
- 递推式构造列表的JavaScript实现
- Javascript 生成无限下拉列表实现代码