| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2679 人关注过本帖
标题:[求助]如何添加/删除下拉菜单中的数据到下拉列表中去???
只看楼主 加入收藏
zsf2006
Rank: 1
来 自:博客园
等 级:新手上路
威 望:1
帖 子:315
专家分:0
注 册:2006-6-3
结帖率:100%
收藏
 问题点数:0 回复次数:5 
[求助]如何添加/删除下拉菜单中的数据到下拉列表中去???
是这样:左边是一个下拉菜单,如下:
<select name="maincatelog" style="width:100px;">
<option value="0">请选择</option>
<option value="IT类">IT类</option>
<option value="销售类">销售类</option>
<option value="市场营销类">市场营销类</option>
<option value="客户服务类">客户服务类</option>
</select>
右边是有一个下拉列表(不含数据),如下:
<select style="WIDTH: 230px" multiple="multiple" size="5" name="jobcatelog">
</select>
中间是二个按钮,如下:
一个是添加按钮
<input type="button" name="Submit" value="添加&gt;&gt;" onClick="add_item(maincatelog,jobcatelog)"/>
一个是删除按钮,如下:
<input type="button" name="Submit2" value="&lt;&lt;删除" onClick="del_item(maincatelog,jobcatelog)"/>
我要实现的功能是 :
当我选择了左边下拉菜单的一个或几个以后,点击添加按钮,数据会添加到右边的下拉列表中去;
当我选择了右边下拉列表中的数据再点击删除按钮时会删除列表中的数据
不知道该怎么实现呢?这两个函数该怎么写,请大虾帮帮忙啊,小弟先谢了!
搜索更多相关主题的帖子: 菜单 数据 列表 删除 
2007-03-20 10:48
阳光白雪
Rank: 7Rank: 7Rank: 7
等 级:贵宾
威 望:39
帖 子:2220
专家分:0
注 册:2005-11-18
收藏
得分:0 

[CODE]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Admin_AdminGroupUser</title>
<link href="Include/Default.Css" rel="stylesheet" type="text/css" />
<Script language="javascript1.2">
function LeftToRight(frm,from,to){
simpleCopy(frm,from,to);
removeOptions(frm,from);
}
function RightToLeft(frm,from,to){
simpleCopy(frm,from,to);
removeOptions(frm,from);
}
function AllToRight(frm,from,to){
CopyAll(frm,from);
simpleCopy(frm,from,to);
removeOptions(frm,from);
}
function AllToLeft(frm,from,to){
CopyAll(frm,from);
simpleCopy(frm,from,to);
removeOptions(frm,from);
}
function simpleCopy(frm,from,to){
var objFrom = getFormElement(frm,from);
var objTo = getFormElement(frm,to);
if(objFrom.selectedIndex == -1){
return;
}
var index;
var notice = '';
for(var i = 0;i < objFrom.options.length;i ++) {
if(objFrom.options[i].selected) {
if(optionExists(objTo,objFrom.options[i])) {
continue;
}
index = objTo.options.length;
objTo.options[index] = new Option(objFrom.options[i].text,objFrom.options[i].value);
}
}
}
function CopyAll(from,left,right){
var objFrom = getFormElement(from,left);
for(var i = 0;i < objFrom.options.length;i ++) {
objFrom.options[i].selected = true;
}
}
function removeOptions(frm,selectbox) {
var obj = getFormElement(frm,selectbox);
var leftBracket = '【';
for(var i = obj.options.length -1;i >= 0;i --) {
var o = obj.options[i];
if(!o.selected || o.text.substr(0,1) == leftBracket)
continue;
obj.options[i] = null;
}
var maxIndex = obj.options.length - 1;
while(maxIndex >= 0 && obj.options[maxIndex].text.substr(0,1) == leftBracket) {
obj.options[maxIndex] = null;
maxIndex --;
}
flag = false;
for(i = obj.options.length - 1;i >= 0;i --) {
if(obj.options[i].text.substr(0,1) != leftBracket) {
flag = false;
} else {
if(flag == true) {
obj.options[i] = null;
}
flag = true;
}
}
obj.selectedIndex = -1;
}
function optionExists(selectbox,option) {
for(var i = 0;i < selectbox.options.length;i ++) {
if(selectbox.options[i].value == option.value) {
return true;
}
}
return false;
}
function getFormElement(frm,name) {
for(var i = 0;i < frm.elements.length;i ++) {
if(frm.elements[i].name == name)
return frm.elements[i];
}
}
</Script>
<SCRIPT language=JavaScript>
function DataFormSub(){
for(i=0;i<document.DataForm.AlreadyUser.options.length;i++){
if(document.DataForm.AlreadyUser.options[i].value!="")
document.DataForm.ChangeData.value += "|" + document.DataForm.AlreadyUser.options[i].value;
}
}
</SCRIPT>
</head>
<body scroll="yes">
<table width="100%" border="0" cellspacing="6" cellpadding="0">
<tr>
<td>
<form method="post" name="DataForm" action="Admin_AdminGroupAction.Asp?FunId=6&action=user" onSubmit="DataFormSub();">
<input type="hidden" name="ChangeData" value="">
<input type="hidden" name="ChangeGroupId" value="1">
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="TabBody">
<tr id="TitleTr">
<td height="26" colspan="3" align="center">==&nbsp;<B>组用户管理</B>&nbsp;==</td>
</tr>
<tr class="TableM_2">
<td width="40%" align="right">
<table width="80%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="26" align="center">未分配用户</td>
</tr>
<tr>
<td class="TabBody">
<select name="NotUser" size="25" multiple style="width:100%" onDblClick="LeftToRight(this.form,'NotUser','AlreadyUser')">
<option value="test">测试用户</option>
<option value="administrator">超级管理员</option>
<option value="admin">系统管理员</option>
</select>
</td>
</tr>
</table>
</td>
<td width="20%" align="center"><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td height="35" align="center"><input name="Submit1" type="button" class="Botton_2" value="&gt;" onClick="LeftToRight(this.form,'NotUser','AlreadyUser')"></td>
</tr>
<tr>
<td height="35" align="center"><input name="Submit2" type="button" class="Botton_2" value="&lt;" onClick="RightToLeft(this.form,'AlreadyUser','NotUser')"></td>
</tr>
<tr>
<td height="35" align="center"><input name="Submit3" type="button" class="Botton_2" value="&gt;&gt;" onClick="AllToRight(this.form,'NotUser','AlreadyUser')"></td>
</tr>
<tr>
<td height="35" align="center"><input name="Submit4" type="button" class="Botton_2" value="&lt;&lt;" onClick="AllToLeft(this.form,'AlreadyUser','NotUser')"></td>
</tr>
</table></td>
<td width="40%">
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="26" align="center">已分配用户</td>
</tr>
<tr>
<td class="TabBody">
<select name="AlreadyUser" size="25" multiple style="width:100%" onDblClick="RightToLeft(this.form,'AlreadyUser','NotUser')">
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr id="BtnTr">
<td height="26" colspan="3" align="center" class="TableBom"><table width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><input name="Submit5" type="submit" class="Botton_3" value=" 提 交 "></td>
<td align="center"><input name="Submit6" type="button" class="Botton_3" onClick="history.back();" value=" 返 回 "></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>[/CODE]

是这样的效果吗?


专注于WEB前端交互平台开发:[url=http://blog./]blog.[/url](富客户端技术(RIA)交流平台)
2007-03-20 11:00
做人很低调
Rank: 5Rank: 5
等 级:贵宾
威 望:18
帖 子:1268
专家分:0
注 册:2006-8-2
收藏
得分:0 
以前我遇到这样的效果

代码没有写那么多

其实我很低调,只是你不知道...
2007-03-20 11:04
zsf2006
Rank: 1
来 自:博客园
等 级:新手上路
威 望:1
帖 子:315
专家分:0
注 册:2006-6-3
收藏
得分:0 
很感谢两位
其实我要的是左边是下拉菜单不是列表,当向右添加数据时,左边框里的内容不会变;
变的只是右边下拉列表里的内容,
不管如何,仍然感谢两位!^^

光临我的博客:http://
2007-03-20 11:41
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:0 

[CODE]<html>
<head>
<title>下拉列表操作示例</title>
<script language="javascript">
var selTxt="";//下拉列表的文本
var selVal="";//下拉列表的值
//获取文本框的值
function getValue()
{
selTxt=this.IText.value;
selVal=this.IValue.value;
}
//添加下拉列表选项的函数
function AddSel_Click()
{
getValue();
//添加下拉列表的代码
//add下拉列表添加方法
//new Option([下拉列表选项的文本,下拉列表选项的值])
this.selTest.options.add(new Option(selTxt,selVal));
}
function DelSel_Click()
{
getValue();
//下拉列表选项删除方法
//selectedIndex下拉列表当前选中的列表项
this.selTest.options.remove(this.selTest.options.selectedIndex);
}
function EditSel_Click()
{
getValue();
//下拉列表选项修改方法
this.selTest.options[this.selTest.options.selectedIndex].value=selVal;
this.selTest.options[this.selTest.options.selectedIndex].text=selTxt;
}
</script>
</head>
<body>
下拉列表<select name="selTest" >
<option></option>
</select><br>
选项:<br>
<input type="text" name="IText" >文本
<input type="text" name="IValue" >值
操作:<br>
<input type="button" name="AddSel" onClick="AddSel_Click();" value="添加选项" >
<input type="button" name="DelSel" onClick="DelSel_Click();" value="删除选项" >
<input type="button" name="EditSel" onClick="EditSel_Click();" value="修改选项" >
</body>
</html>[/CODE]

[此贴子已经被作者于2007-3-20 11:59:49编辑过]

2007-03-20 11:48
阳光白雪
Rank: 7Rank: 7Rank: 7
等 级:贵宾
威 望:39
帖 子:2220
专家分:0
注 册:2005-11-18
收藏
得分:0 
不需要删除左边的选项只需要把LeftToRight,AllToRight两个函数中调用removeOptions函数的部分注释掉就可以了

[QUOTE]我要实现的功能是 :
当我选择了左边下拉菜单的一个或几个以后,点击添加按钮,数据会添加到右边的下拉列表中去;
当我选择了右边下拉列表中的数据再点击删除按钮时会删除列表中的数据
不知道该怎么实现呢?这两个函数该怎么写,请大虾帮帮忙啊,小弟先谢了!
更正一下:下拉菜单是不能同时选择几项的,下拉列表可以,虽然两者从代码看差不多
[/QUOTE]

专注于WEB前端交互平台开发:[url=http://blog./]blog.[/url](富客户端技术(RIA)交流平台)
2007-03-20 11:51
快速回复:[求助]如何添加/删除下拉菜单中的数据到下拉列表中去???
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020583 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved