当前位置: 代码迷 >> Java Web开发 >> 如何用js去除和添加下拉框选项
  详细解决方案

如何用js去除和添加下拉框选项

热度:138   发布时间:2016-04-17 10:58:37.0
怎么用js去除和添加下拉框选项?
如题:有两个下拉框:
<td width="15%">
  <html:select multiple="multiple" size="25" property="cellphone" name="form" style='width:130px;'>
  <html:option value="">所有联系人</html:option>
  <html:optionsCollection name="pageList" value="cellphone" label="username"/>
  </html:select>  
</td>
<td width="11%" align="center">
  <input type="button" id="add1" name="add1" value=">>" class="navibutton" onclick="copyToList ('cellphone','selectAbId')"><br><br>
</td>
<td width="15%">
  <select name="selectAbId" multiple="multiple" size="25" style='width:130px;'>
  <option value="">从左边选择联系人</option>
  </select>  
</td>
怎么把选择的cellphone选项添加到selectAbId中,同时把cellphone中被选中的删除?用js怎么实现?
这是我的js:
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{

  var fromList =document.getElementsByName("cellphone")[0];  
 
  var toList = document.getElementsByName("selectAbId")[0];  
  alert("断点11111111");  
  if (toList.options.length > 0 && trim(toList.options[0].value) == ""){
  toList.options.length = 0;
 
  }
  alert("断点22222222");
  var sel = false;
  for (i=0;i<fromList.options.length;i++){
  var current = fromList.options[i];
  if (current.selected){
  sel = true;
  if (trim(current.value) == "" || current.value.length==0){
  alert ('你不能选择这个联系人!');
  return;
  }
  txt = current.text;
  val = current.value;
  toList.options[toList.length] = new Option(txt,val);
  fromList.options[i] = null;
  i--;
  }
  }
  if (!sel) alert ('你还没有选择任何联系人');
}
当点击按钮时,只弹出了“断点11111111”,“断点2222222”没有弹出,把“断点11111111”、“断点2222222”之间的代码删掉,“断点2222222”也可以弹出,这是怎么回事,若是有直接实现这个功能的js也行,请大家帮帮忙。。。。谢了,急需、、、

------解决方案--------------------
参照DHTML手册,里面有很详细的对下拉框增加、删除选项操作例子:
HTML code
<SELECT ID="oSelect"><OPTION VALUE="1">One</OPTION></SELECT><SCRIPT>var oOption = document.createElement("OPTION");oSelect.options.add(oOption);oOption.innerText = "Two";oOption.value = "2";</SCRIPT>object.remove(iIndex)
------解决方案--------------------
JScript code
function moveOption(e1,e2){   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       }    }}
------解决方案--------------------
最好是给你的下拉框设一个id,给你三个方法,希望对你有用:
/**
 * @see 获得对象
 * @param id 对象的id(表单元素和其他标签都可以)
 * @return Object
 */
function $(id) {
return document.getElementById(id);
}

/**
 * @see 清空下拉框
 * @param id 下拉框的ID
 * @param count 表示要保留的选项数目
 */
function clearSelect(id, count) {
  相关解决方案