小例子--实现select 控件值转移

高尔夫golf

于 2017-01-17 09:38:34 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/konglongaa/article/details/54580197

html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的选项菜单操作案例，包括获取选中项的值和ID，以及将选项从一个下拉菜单移动到另一个的功能。通过具体代码示例展示了如何使用JavaScript与HTML元素进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title></title>
<script type=text/javascript>
function getselect(n){
var v = '';
var t = '';
for(var i = 0; i < n.options.length; i++){
if(i==0){
t = n.options[i].id;
v = n.options[i].value;
}else{
t += ','+n.options[i].id;
v += ','+n.options[i].value;
}
}
alert(v+'|'+t);
}

function getmove(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;
}
}
}
</script>
</head>
<body>
<table>
<form name="form1">
<tr>
<td>
<select name="n1" id="n1">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
</td>
<td>
<select name="n2" id="n2">
</select>
</td>
</tr>
<tr>
<td><a onclick="getselect(document.form1.n1)" href="#">获取</a></td>
<td><a onclick="getmove(document.form1.n1,document.form1.n2)" href="#">转移</a></td>
</tr>
</form>
</table>
<body>
</html>