如何用js去除和添加下拉框选项
日期：2014-05-16 浏览次数：20410 次
怎么用js去除和添加下拉框选项？
如题：有两个下拉框：
<select name="left" multiple="multiple" size="25" style='width:130px;'>
<option value="">请选择</option>
<option value="">请选择</option>
<option value="">请选择</option>
</select>
<select name="right" multiple="multiple" size="25" style='width:130px;'>
<option value="">从左侧选择</option>
</select>
怎么把选择的left选项添加到right中，同时把left中被选中的删除？用js怎么实现？在线等，知道的，指点下，最好贴出js代码，先谢过了，急用、、、、
------解决方案--------------------
<html>
<head>
<title></title>
<script type='text/javascript'>
function selectItem() {
var left = document.getElementsByName("left")[0];
var right = document.getElementsByName("right")[0];
left.ondblclick = function () {
var text = this.options[this.selectedIndex].text;
right.options.add(new Option(text, text));
this.removeChild(this.options[this.selectedIndex]);
}
}
window.onload = selectItem;
</script>
</head>
<body>
<h4>请双击左侧选项进行选择</h4>
<select name="left" multiple="multiple" size="25" style='width: 130px;'>
<option value="">请选择1</option>
<option value="">请选择2</option>
<option value="">请选择3</option>
</select>
<select name="right" multiple="multiple" size="25" style='width: 130px;'>
<option value="">从左侧选择</option>
</select>
</body>
</html>
------解决方案--------------------
var op = document.createElement("OPTION");
op.value = document.left.value;
right.options.add(op)
document.all.left.remove(left.selectedIndex);
------解决方案--------------------
如题：有两个下拉框：
<select name="left" multiple="multiple" size="25" style='width:130px;'>
<option value="">请选择</option>
<option value="">请选择</option>
<option value="">请选择</option>
</select>
<select name="right" multiple="multiple" size="25" style='width:130px;'>
<option value="">从左侧选择</option>
</select>
怎么把选择的left选项添加到right中，同时把left中被选中的删除？用js怎么实现？在线等，知道的，指点下，最好贴出js代码，先谢过了，急用、、、、
------解决方案--------------------
<html>
<head>
<title></title>
<script type='text/javascript'>
function selectItem() {
var left = document.getElementsByName("left")[0];
var right = document.getElementsByName("right")[0];
left.ondblclick = function () {
var text = this.options[this.selectedIndex].text;
right.options.add(new Option(text, text));
this.removeChild(this.options[this.selectedIndex]);
}
}
window.onload = selectItem;
</script>
</head>
<body>
<h4>请双击左侧选项进行选择</h4>
<select name="left" multiple="multiple" size="25" style='width: 130px;'>
<option value="">请选择1</option>
<option value="">请选择2</option>
<option value="">请选择3</option>
</select>
<select name="right" multiple="multiple" size="25" style='width: 130px;'>
<option value="">从左侧选择</option>
</select>
</body>
</html>
------解决方案--------------------
var op = document.createElement("OPTION");
op.value = document.left.value;
right.options.add(op)
document.all.left.remove(left.selectedIndex);
------解决方案--------------------
- HTML code
<HTML>
<HEAD>
<TITLE>main</TITLE>
<script type="text/javascript">
function transferOpt()
{
var _left=document.getElementsByName("left")[0];
var _right=document.getElementsByName("right")[0];
if(_left.selectedIndex!=-1)
{
var _opt=_left[_left.selectedIndex];
_right.appendChild(_opt);
}
}
</script>
</HEAD>
<body>
<select name="left" multiple="multiple" size="25" style='width:130px;' ondblclick="transferOpt()">
<option value="">请选择</option>
<option value="">请选择</option>
<option value="">请选择</option>
</select>
<select name="right" multiple="multiple" size="25" style='width:130px;'>
<option value="">从左侧选择</option>
</select>
</body>
</HTML>
------解决方案--------------------
我用的是jquery
清空select
$("#id").option.length=0
新增
$("#id").option[0]=new option('dddd','dddd')
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
