怎样把左边的下拉框内容添加到右边的下拉框,而且是选多个,还有怎样从右边的下拉框移除对象,最好用div 方法
解决方案 »
- 求助,父框架在新窗口打开问题
- java 传值比较问题??哪为高人帮指点一下,谢谢
- 高分求:上传时检测判断,超过限制就不给传
- 请教:在Server.xml中怎么修改Web应用名称的Context对的问题
- 请教高手:在struts架构中怎么在单击超链接的时候把,该链接相应的内容传到FormBean中?
- JSP框架(frameset)跳转后,部分栏无法显示
- Struts <bean:write>标签问题
- ※※用过BEA的WorkShop的朋友请进!※※
- 如何在JSP页面间传送整型值.(在线等待)
- 类路径问题
- proxool连接池的问题(在线等,顶者有分)
- Struts2结合jquery.MultiFile多文件上传组件 实现 多文件上传的问题
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by hill">
</HEAD>
<BODY>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山东">山东</option>
<option value="安徽">安徽</option>
<option value="重庆">重庆</option>
<option value="福建">福建</option>
<option value="甘肃">甘肃</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="贵州">贵州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龙江">黑龙江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button onclick="changepos(list2,-1)" type="button">上移</button>
<br/>
<button onclick="changepos(list2,1)" type="button">下移</button>
</td>
</tr>
</table>
值:<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos(obj,index)
{
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
//-->
</script>
</BODY>
</HTML>
/********************************可配置选项********************************/
// 被选中的相似关键字背景颜色
var selectedBgColor = "#CCCCCC";
// 未被选中的相似关键字背景颜色
var unselectedBgColor = "#FFFFFF";
// 相似关键字列表框的边框
var listBorder = "1 solid #000000";
/***************************************************************************/
/********************************不可配置选项********************************/
// 上一次输入的关键字(用来判断关键字是否有改变,没有则不再去服务端重新获取提示关键字)
var oldKeyValue;
// 鼠标相对于提示关键字列表框的位置(0:提示框外面,1:提示框里面)
var mouseLocation = 0;
// 当前选中的提示关键字索引(从0开始,等于-1表示没有被选中项)
var selectedKeyIndex = -1;
// 上一次选中的提示关键字索引(从0开始,等于-1表示没有上次被选中项)
var oldSelectedKeyIndex = -1;
// 提示关键字总数
var tdCount = 0;
/***************************************************************************/
/*
用途:给String对象添加去除左右空格方法
*/
String.prototype.trim = function() {
var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m == null) ? "" : m[1];
}
/*
用途:初始化提示关键字列表框的状态
*/
function initKeyListState(){
selectedKeyIndex = -1;
oldSelectedKeyIndex = -1;
tdCount = 0;
}
/*
用途:将上一次选中的关键字项变为未选中
*/
function disSelectedOldKey(){
//判断说明:oldSelectedKeyIndex!=selectedKeyIndex
// 当只有一个相似关键字的时候,则不存在上一次选中和这次选中关键字,
// 只要第一次选中后,按向上或向下箭头都是选中。
if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
$('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;
}
// 上一次选中项更新
oldSelectedKeyIndex = selectedKeyIndex;
}
/*
用途:当按上下箭头时选中新的提示关键字项,按回车时将选中的提示关键字输入到搜索框。
*/
function setSelectedKey(){
// $('keyId0')存在表示有相关提示关键字,不存在则不处理。
if($('keyId0')){
if (event.keyCode==38){
//------处理向上事件------
if (selectedKeyIndex==-1){
selectedKeyIndex = tdCount-1;
}else{
selectedKeyIndex= (selectedKeyIndex+tdCount-1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==40){
//------处理向下事件------
if (selectedKeyIndex==-1){
selectedKeyIndex = 0;
}else{
selectedKeyIndex = (selectedKeyIndex+1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==13){
//------处理回车事件------
$('searchInput').value=$('keyId'+ selectedKeyIndex).innerText;
setCursorLast($('searchInput'));
// 隐藏提示关键字列表框
$('dropdownlistDiv').style.display='none';
}
}
}
/*
用途:获取相似关键字
*/
function getConformKey(){
if(event.keyCode==13)
{
document.getElementById("showDiv").style.display='none';
return ;
}
var keyValue = $('searchInput').value.trim();
// 如果这次的查询关键字和上次的一样,则不去服务器重新获取相似关键字列表。
if (keyValue!=oldKeyValue){
// 关键字为空则不去服务器获取相似关键字列表
if (keyValue==''){
DWRUtil.removeAllRows('showKeyList');
setDropListVisible(false);
initKeyListState();
}else{
//采用ajax异步模式获取相似关键字
JText.findType(keyValue,conformKeyCallback);
}
}
}
/*
用途:获取关键字回调方法
*/
function conformKeyCallback(keyList){
DWRUtil.removeAllRows('showKeyList');
initKeyListState();
if (keyList.length>0){
// 生成相似关键字提示框
DWRUtil.addRows('showKeyList',keyList,cellFuncs, {
cellCreator:function(options) {
var td = document.createElement("td");
td.id = 'keyId' + tdCount++;
td.onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};
td.onclick= function (){
$('searchInput').value=this.innerText;
$('searchInput').focus();
setCursorLast($('searchInput'));
$('dropdownlistDiv').style.display='none';
};
return td;
},escapeHtml:false});
setDropListVisible(true);
}else{
setDropListVisible(false);
}
}
/*
用途:表格数据显示处理方法
*/
var cellFuncs = [
function(data) { return data; }
];
/*
用途:将输入框的光标移到最后
*/
function setCursorLast(inputObj){
var inputRange = inputObj.createTextRange();
inputRange.collapse(true);
inputRange.moveStart('character',inputObj.value.length);
inputRange.select();
}
/*
用途:创建相似关键字列表框
left = parseInt($('searchInput').style.left.replace('px',''))+10;
top = parseInt($('searchInput').style.top.replace('px',''))+parseInt($('searchInput').style.height.replace('px',''))+16;
*/
function createShowDiv(){
var showDiv = document.createElement("div");
showDiv.id = "dropdownlistDiv";
var obj =$('searchInput');
var x,y;
oRect = obj.getBoundingClientRect();
x=oRect.left ;
y=oRect.top ; with(showDiv.style){
position = "absolute";
width = parseInt($('searchInput').style.width.replace('px',''));
border = listBorder;
left =x;
top=y+20;
zIndex = "1";
display='none';
backgroundColor = unselectedBgColor;
} showDiv.onmouseover=function (){mouseLocation=1;};
showDiv.onmouseout=function (){mouseLocation=0;};
showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;font-size: 12;'><tbody id='showKeyList' style='color:#33CC00;margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";
document.body.appendChild(showDiv);
initKeyListState();
}
/*
用途:设置相似关键字列表框是否可见
参数:isDisplay,true表示可见,false表示不可见
*/
function setDropListVisible(isDisplay){
if (mouseLocation == 1){
return;
}
if (($('searchInput').value.trim()!='')&&(isDisplay==true)){
$('dropdownlistDiv').style.display='';
}
else{
$('dropdownlistDiv').style.display='none';
}
}
// 将创建相似关键字列表框方法附加到onload事件中
if (window.addEventListener){
window.addEventListener('load', createShowDiv, false);
}else if (window.attachEvent){
window.attachEvent('onload', createShowDiv);
}
以上是类似于这样的例子,只是一个用层做的下拉列表框,选中一个值后放到一个文本框中,你只要稍加改动就可以了,
这个例子用的AJAX框架是DWR,里面有在TABLE中添加一行的方法,以及移除所有行的方法。
/********************************可配置选项********************************/
// 被选中的相似关键字背景颜色
var selectedBgColor = "#CCCCCC";
// 未被选中的相似关键字背景颜色
var unselectedBgColor = "#FFFFFF";
// 相似关键字列表框的边框
var listBorder = "1 solid #000000";
/***************************************************************************/
/********************************不可配置选项********************************/
// 上一次输入的关键字(用来判断关键字是否有改变,没有则不再去服务端重新获取提示关键字)
var oldKeyValue;
// 鼠标相对于提示关键字列表框的位置(0:提示框外面,1:提示框里面)
var mouseLocation = 0;
// 当前选中的提示关键字索引(从0开始,等于-1表示没有被选中项)
var selectedKeyIndex = -1;
// 上一次选中的提示关键字索引(从0开始,等于-1表示没有上次被选中项)
var oldSelectedKeyIndex = -1;
// 提示关键字总数
var tdCount = 0;
/***************************************************************************/
/*
用途:给String对象添加去除左右空格方法
*/
String.prototype.trim = function() {
var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m == null) ? "" : m[1];
}
/*
用途:初始化提示关键字列表框的状态
*/
function initKeyListState(){
selectedKeyIndex = -1;
oldSelectedKeyIndex = -1;
tdCount = 0;
}
/*
用途:将上一次选中的关键字项变为未选中
*/
function disSelectedOldKey(){
//判断说明:oldSelectedKeyIndex!=selectedKeyIndex
// 当只有一个相似关键字的时候,则不存在上一次选中和这次选中关键字,
// 只要第一次选中后,按向上或向下箭头都是选中。
if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
$('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;
}
// 上一次选中项更新
oldSelectedKeyIndex = selectedKeyIndex;
}
/*
用途:当按上下箭头时选中新的提示关键字项,按回车时将选中的提示关键字输入到搜索框。
*/
function setSelectedKey(){
// $('keyId0')存在表示有相关提示关键字,不存在则不处理。
if($('keyId0')){
if (event.keyCode==38){
//------处理向上事件------
if (selectedKeyIndex==-1){
selectedKeyIndex = tdCount-1;
}else{
selectedKeyIndex= (selectedKeyIndex+tdCount-1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==40){
//------处理向下事件------
if (selectedKeyIndex==-1){
selectedKeyIndex = 0;
}else{
selectedKeyIndex = (selectedKeyIndex+1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==13){
//------处理回车事件------
$('searchInput').value=$('keyId'+ selectedKeyIndex).innerText;
setCursorLast($('searchInput'));
// 隐藏提示关键字列表框
$('dropdownlistDiv').style.display='none';
}
}
}
/*
用途:获取相似关键字
*/
function getConformKey(){
if(event.keyCode==13)
{
document.getElementById("showDiv").style.display='none';
return ;
}
var keyValue = $('searchInput').value.trim();
// 如果这次的查询关键字和上次的一样,则不去服务器重新获取相似关键字列表。
if (keyValue!=oldKeyValue){
// 关键字为空则不去服务器获取相似关键字列表
if (keyValue==''){
DWRUtil.removeAllRows('showKeyList');
setDropListVisible(false);
initKeyListState();
}else{
//采用ajax异步模式获取相似关键字
JText.findType(keyValue,conformKeyCallback);
}
}
}
/*
用途:获取关键字回调方法
*/
function conformKeyCallback(keyList){
DWRUtil.removeAllRows('showKeyList');
initKeyListState();
if (keyList.length>0){
// 生成相似关键字提示框
DWRUtil.addRows('showKeyList',keyList,cellFuncs, {
cellCreator:function(options) {
var td = document.createElement("td");
td.id = 'keyId' + tdCount++;
td.onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};
td.onclick= function (){
$('searchInput').value=this.innerText;
$('searchInput').focus();
setCursorLast($('searchInput'));
$('dropdownlistDiv').style.display='none';
};
return td;
},escapeHtml:false});
setDropListVisible(true);
}else{
setDropListVisible(false);
}
}
/*
用途:表格数据显示处理方法
*/
var cellFuncs = [
function(data) { return data; }
];
/*
用途:将输入框的光标移到最后
*/
function setCursorLast(inputObj){
var inputRange = inputObj.createTextRange();
inputRange.collapse(true);
inputRange.moveStart('character',inputObj.value.length);
inputRange.select();
}
/*
用途:创建相似关键字列表框
left = parseInt($('searchInput').style.left.replace('px',''))+10;
top = parseInt($('searchInput').style.top.replace('px',''))+parseInt($('searchInput').style.height.replace('px',''))+16;
*/
function createShowDiv(){
var showDiv = document.createElement("div");
showDiv.id = "dropdownlistDiv";
var obj =$('searchInput');
var x,y;
oRect = obj.getBoundingClientRect();
x=oRect.left ;
y=oRect.top ; with(showDiv.style){
position = "absolute";
width = parseInt($('searchInput').style.width.replace('px',''));
border = listBorder;
left =x;
top=y+20;
zIndex = "1";
display='none';
backgroundColor = unselectedBgColor;
} showDiv.onmouseover=function (){mouseLocation=1;};
showDiv.onmouseout=function (){mouseLocation=0;};
showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;font-size: 12;'><tbody id='showKeyList' style='color:#33CC00;margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";
document.body.appendChild(showDiv);
initKeyListState();
}
/*
用途:设置相似关键字列表框是否可见
参数:isDisplay,true表示可见,false表示不可见
*/
function setDropListVisible(isDisplay){
if (mouseLocation == 1){
return;
}
if (($('searchInput').value.trim()!='')&&(isDisplay==true)){
$('dropdownlistDiv').style.display='';
}
else{
$('dropdownlistDiv').style.display='none';
}
}
// 将创建相似关键字列表框方法附加到onload事件中
if (window.addEventListener){
window.addEventListener('load', createShowDiv, false);
}else if (window.attachEvent){
window.attachEvent('onload', createShowDiv);
}
以上是类似于这样的例子,只是一个用层做的下拉列表框,选中一个值后放到一个文本框中,你只要稍加改动就可以了,
这个例子用的AJAX框架是DWR,里面有在TABLE中添加一行的方法,以及移除所有行的方法。