81,092
社区成员
发帖
与我相关
我的任务
分享js 将一个select中的option追加到另一个select出现问题
<!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>无标题文档</title>
<script language="javascript">
function remove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
for(var j=0;j<select2.options.length;j++){
var _target=select2.options[j].text;
for(var i=0;i<select1.options.length;i++){
var _value = select1.options[i].value; //选中项的value;
var _text = select1.options[i].text; //选中项的text;
if(select1.options[i].selected == true && _text != _target){
//将选中的append到select2;
document.getElementById("select2").options.add(new Option(_text,_value));
}
}
}
}
</script>
</head>
<body>
<form name="form2" onsubmit="null">
<p>移动(move)测试:</p>
<select id="select1" style="width:100px" size="5" multiple="true">
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
<option value="4">number 4</option>
<option value="5">number 5</option>
</select>
<input type="button" onclick="remove()" value="添加"/>
<select id="select2" style="width:100px" size="5" multiple="true">
<option value="">请选择</option>
</select>
</form>
</body>
</html>
想要达到的效果就是:select2中已有的元素,onclick select1中选中元素时不追加进去.
请各位指点一下!
...全文
请发表友善的回复…
发表回复
gengbaokun 2011-04-27
- 打赏
- 举报
卡那可那可能看到那开始加快
chuanbing 2010-01-13
- 打赏
- 举报
呵呵，谢谢各位！
9楼的链接我已经看过，但是在后台取value的时候得到的是一个null...
9楼的链接我已经看过，但是在后台取value的时候得到的是一个null...
awusoft 2010-01-13
- 打赏
- 举报
<!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>无标题文档</title>
<script language="javascript">
function remove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
for(var i=0;i<select1.options.length;i++){
if(select1.options[i].selected == true ){
var _v1 = select1.options[i].value; //选中项的value;
var _t1 = select1.options[i].text; //选中项的text;
var f=true;//标签不存
for(var j=0;j<select2.options.length;j++){
if(select2.options[j].text==_t1 && select2.options[j].value==_v1)//根据需要去变成&& ||
{
f=false;//表示存在
break;
}
}
if(f)
{
select2.options.add(new Option(_t1,_v1));
}
}
}
}
</script>
</head>
<body>
<form name="form2" onsubmit="null">
<p>移动(move)测试:</p>
<select id="select1" style="width:100px" size="5" multiple="true">
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
<option value="4">number 4</option>
<option value="5">number 5</option>
</select>
<input type="button" onclick="remove()" value="添加"/>
<select id="select2" style="width:100px" size="5" multiple="true">
<option value="">请选择</option>
</select>
</form>
</body>
</html>
zl3450341 2010-01-12
- 打赏
- 举报
你好毒你好毒 2010-01-12
- 打赏
- 举报
做WEB方面开发的看来JS是非常的了解 顶！！！！！！！！！！！！！！
crazylaa 2010-01-12
- 打赏
- 举报
去重复的话，循环啊，text、value都相等就是重复的（一般只看value）。
hoojo 2010-01-12
- 打赏
- 举报
这是本人花了一个上午的时间用jQuery写的。可以去掉重复项。带有动态的css样式。
本人觉得非常完美。
呵呵……
希望对你有帮助。
本人觉得非常完美。
呵呵……
希望对你有帮助。
hoojo 2010-01-12
- 打赏
- 举报
.left2Right {
background: azure url("b_rightoff.gif") no-repeat ;
border: 1px;
width: 70px;
height: 32px;
}
.right2Left {
background: azure url("b_leftoff.gif") no-repeat ;
border: 1px;
width: 70px;
height: 32px;
}
.left2Right2 {
background: azure url("b_right.gif") no-repeat ;
border: 0;
width: 70px;
height: 32px;
cursor: pointer;
}
.right2Left2 {
background: azure url("b_left.gif") no-repeat ;
border: 0;
width: 70px;
height: 32px;
cursor: pointer;
}
hoojo 2010-01-12
- 打赏
- 举报
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>设置选项</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jslib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function () {
var oStation = $("#station");
var oLate = $("#late");
var oRes = $("#res");
var oRelationStr = $("#relationStr");
oRelationStr.val("");
//禁用按钮
setDisabled(oStation, oLate, oRes);
//从左到中间，(站点到栏目配置)
$("#stationToLate").click(function () {
var selectedOption = oStation.find("option:selected");
var oLateOptions = oLate.find("option");
selectedOption.each(function () {
var el = this;
var bool = false;
oLateOptions.each(function () {
if (el.value == this.value) {
bool = true;
}
});
if (!bool)
oLate.append(el);
else
$(el).remove();
el.selected = "";
});
setDisabled(oStation, oLate, oRes);
});
//从中间到左边（栏目配置到站点）
$("#lateToStation").click(function () {
var selectedOption = oLate.find("option:selected");
var oStationOptions = oStation.find("option");
selectedOption.each(function () {
var el = this;
var bool = false;
oStationOptions.each(function () {
//alert(el.value + ":" + this.value);
if (el.value == this.value) {
bool = true;
}
});
if (!bool) {
if ($(el).attr("key") == "left")
oStation.append(el);
} else
$(el).remove();
el.selected = "";
});
setDisabled(oStation, oLate, oRes);
});
//中间到右边（栏目配置到资源）
$("#lateToRes").click(function () {
var selectedOption = oLate.find("option:selected");
var oResOptions = oRes.find("option");
selectedOption.each(function () {
var el = this;
var bool = false;
oResOptions.each(function () {
if (el.value == this.value) {
bool = true;
}
});
if (!bool) {
if ($(el).attr("key") == "right")
oRes.append(el);
} else
$(el).remove();
el.selected = "";
});
setDisabled(oStation, oLate, oRes);
});
//从右边到中间（资源到栏目配置）
$("#resToLate").click(function () {
var selectedOption = oRes.find("option:selected");
var oLateOptions = oLate.find("option");
selectedOption.each(function () {
var el = this;
var bool = false;
oLateOptions.each(function () {
if (el.value == this.value) {
bool = true;
}
});
if (!bool)
oLate.append(el);
else
$(el).remove();
el.selected = "";
});
setDisabled(oStation, oLate, oRes);
});
//如果有选中的项，就可以添加。否则按钮就不可编辑（不能添加）
oStation.change(function () {
setDisabled(oStation, oLate, oRes);
});
oLate.change(function () {
setDisabled(oStation, oLate, oRes);
});
oRes.change(function () {
setDisabled(oStation, oLate, oRes);
});
$("#submitBtn").click(function () {
var tempStr = "";
oLate.find("option").each(function () {
tempStr += $(this).attr("key") == "left" ? this.value + ",s:" : this.value + ",r:";
});
oRelationStr.val(tempStr.substring(0, tempStr.length - 1));
if (tempStr == "")
alert("次级栏目列表配置内容为空，不能提交！");
else {
alert(oRelationStr.val());
//console.dir($("form[name='columnConfigForm']"));
var oForm = $("form[name='columnConfigForm']").get(0);
oForm.action = "http://www.baidu.com";
oForm.submit();
}
});
});
//禁用没有选中项的按钮
function setDisabled (oStation, oLate, oRes) {
//$("#stationToLate").get(0).disabled = oStation.find("option:selected").length == 0;
//$("#lateToStation").get(0).disabled = oLate.find("option:selected").length == 0;
//$("#lateToRes").get(0).disabled = oLate.find("option:selected").length == 0;
//$("#resToLate")[0].disabled = oRes.find("option:selected").length == 0;
if (oStation.find("option:selected").length == 0) {
$("#stationToLate").addClass("left2Right").removeClass("left2Right2");
} else {
$("#stationToLate").addClass("left2Right2").removeClass("left2Right1");
}
if (oRes.find("option:selected").length == 0) {
$("#resToLate").addClass("right2Left").removeClass("right2Left2");
} else {
$("#resToLate").addClass("right2Left2").removeClass("right2Left");
}
if (oLate.find("option:selected").length == 0) {
$("#lateToStation").addClass("right2Left").removeClass("right2Left2");
$("#lateToRes").addClass("left2Right").removeClass("left2Right2");
} else {
$("#lateToStation").addClass("right2Left2").removeClass("right2Left");
$("#lateToRes").addClass("left2Right2").removeClass("left2Right");
}
var addAlign = oLate.find("option:selected").attr("key");
if (addAlign == "left") {
//$("#lateToStation").get(0).disabled = false;
//$("#lateToRes").get(0).disabled = true;
$("#lateToStation").addClass("right2Left2").removeClass("right2Left");
$("#lateToRes").addClass("left2Right").removeClass("left2Right2");
}
if (addAlign == "right") {
//$("#lateToStation").get(0).disabled = true;
//$("#lateToRes").get(0).disabled = false;
$("#lateToStation").addClass("right2Left").removeClass("right2Left2");
$("#lateToRes").addClass("left2Right2").removeClass("left2Right");
}
}
</script>
</head>
<body>
<form action="" method="post" name="columnConfigForm">
<table border="0" align="center" style="border: blue solid 1px;">
<tr>
<td>站点：</td>
<td></td>
<td>栏目配置：</td>
<td></td>
<td>资源配置：</td>
</tr>
<tr>
<td>
<select id="station" multiple="multiple" size="8" style="width: 150px;">
<option key="left" value="station_1_value1">站点选项1</option>
<option key="left" value="station_1_value2">站点选项2</option>
<option key="left" value="station_1_value3">站点选项3</option>
<option key="left" value="station_1_value4">站点选项4</option>
<option key="left" value="station_1_value5">站点选项5</option>
<option key="left" value="station_1_value6">站点选项6</option>
</select>
</td>
<td>
<input type="button" value=">>" id="stationToLate" class="left2Right"/><br/>
<input type="button" value="<<" id="lateToStation" class="right2Left"/><br/>
</td>
<td>
<select id="late" multiple="multiple" size="8" style="width: 150px;">
<option key="left" value="station_1_value1">站点选项1</option>
<option key="left" value="station_1_value2">站点选项2</option>
<option key="right" value="res_1_value1">资源选项1</option>
</select>
</td>
<td>
<input type="button" value=">>" id="lateToRes" class="left2Right"/><br/>
<input type="button" value="<<" id="resToLate" class="right2Left"/><br/>
</td>
<td>
<select id="res" multiple="multiple" size="8" style="width: 150px;">
<option key="right" value="res_1_value1">资源选项1</option>
<option key="right" value="res_1_value2">资源选项2</option>
<option key="right" value="res_1_value3">资源选项3</option>
<option key="right" value="res_1_value4">资源选项4</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" id="relationStr" name="relationStr" value=""/>
<input type="button" value="提交" id="submitBtn"/>
</td>
</tr>
</table>
</form>
</body>
</html>
chuanbing 2010-01-12
- 打赏
- 举报
顶.
chuanbing 2010-01-12
- 打赏
- 举报
我用了一个 button ,现在是可以添加了,但是不能排除重复项.谢谢~
kevindude 2010-01-12
- 打赏
- 举报
你自己函数不都写好了吗？把你的函数加到select1中的onclick事件处理就可以了啊。
<select id="select1" style="width:100px" size="5" multiple="true" onclick=remove()>
...
<select id="select1" style="width:100px" size="5" multiple="true" onclick=remove()>
...
