多选的select框,大小已经确定,用js 添加删除时select框不断的宽带变小
求解决办法
求解决办法
解决方案 »
- 急!jquery如何获取子元素的value值
- 帮忙看看这段代码
- js 有没有这种类型 就是一个key对应一个value
- 向各位请教一个js问题
- 请问复选框返回的值是数组马
- 用js如何获取url参数如下地址http://book.gobygo.com/TheGoByGoWebForUser/Category/Book/BookProductLibraryHome.htm?url=http://book.g
- 大家求救啊 :javaScipt中的变量复值后到Servlet 中就取出来是空????
- 如何判断上载文件大小是否超过限制
- 能不能在打开网页的时候让他运行网站里的bat文件
- 我把网页包含在一个.js 文件中不过有错,但我找不出
- window.createPopup() 奇怪的问题!
- 如何把这个半透明的下拉菜单变成不透明的
如果添加的项的宽度大于selelct宽度会自动扩宽
</select>
把代码贴下面:
1.JS的代码
<script language="javascript">
//将id为selectSrc的下拉框的选中项添加到id为selectDes的下拉框中,同时删除选中项
function addItems(selectSrc,selectDes){
var oSelectDes=document.getElementById(selectDes);
var oSelectSrc=document.getElementById(selectSrc);
for(var i=0;i<oSelectSrc.options.length;i++){
if(oSelectSrc.options[i].selected){
var e=oSelectSrc.options[i]; //如果当前项不在目标下拉框中,则添加
if(!isInselectDes(e,oSelectDes)){
var item= document.createElement("option");
item.innerText=e.text;
item.value = e.value;
oSelectDes.appendChild(item);
}
}
} //删除选中的数据项
for(var i=oSelectSrc.length-1;i>-1;i--){
if(oSelectSrc.options[i].selected){
oSelectSrc.removeChild(oSelectSrc.options[i]);
}
}
} //判断当前项是否在oSelectDes的数据项中
function isInselectDes(item,oSelectDes){
var val=item.value;
var bIn=false;
for(var i=0;i<oSelectDes.options.length;i++){
var e=oSelectDes.options[i];
if(e.value==val){
bIn=true;
}
}
return bIn;
}
</script>2.核心的多选框,左右两个,选中一个的项添加到另外的一个去,添加或者删除时下拉框的宽度会变小
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" id="AutoNumber10">
<tr>
<td width="45%">
<div id="selectLeftShow">
<select name="selectLeft" id="selectLeft" style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 12px; FLOAT: none; BORDER-LEFT: #ffffff 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 200; BACKGROUND-COLOR: #ffffff" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</td>
<td width="10%" align="center">
<input type="button" value="添加" class="bt_select" name="add" onclick="addItems('selectLeft','selectRight')"><br> <br>
<input type="button" value="删除" class="bt_wipeoff" name="delete" onclick="addItems('selectRight','selectLeft')"></td>
<td width="45%">
<div id="selectRightShow">
<select name="selectRight" id="selectRight" style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 12px; FLOAT: none; BORDER-LEFT: #ffffff 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 200; BACKGROUND-COLOR: #ffffff" multiple="multiple">
</select>
</div>
</td>
</tr>
</table>