如何遍历select下拉菜单中的内容，并显示在另一个select菜单中？

superrr 2002-03-30 06:40:18
如何遍历select下拉菜单中的内容，并显示在另一个select菜单中？
另外，select下拉框有哪些属性和方法？（特别一点的）
...全文
696 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
flylyke 2002-03-31
  • 打赏
  • 举报
 回复
做如下修改:
<script>
for (var i=0;i<form1.select.options.length;i++) {
var op=document.createElement("option")
op.text=form1.select.options[i].text;
op.value = form1.select.options[i].value;
form1.select2.add(op)
}
</script>
superrr 2002-03-31
  • 打赏
  • 举报
 回复
帖子加了10分,望回复!
superrr 2002-03-31
  • 打赏
  • 举报
 回复
好象不行啊！（运行后，什么反应都没有，任务栏有个黄色的感叹号，有错误，但不知错在哪里）
我的代码是这样的
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<div align="center"><table width="30%" border="0">
<tr>
<td rowspan="2">
<div align="center">
<select name="select" size="10" style="width:120">
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</td>
<td height="64">
<div align="center">
<input type="submit" name="Submit" value="Submit">
</div>
</td>
<td rowspan="2">
<div align="center">
<select name="select2" size="10" style="width:120">
<script>
for (var i=0;i<select1.options.length;i++) {
var op=document.createElement("option")
op.text=select1.options[i].text;
op.value = select1.options[i].value;
select2.add(op)
}
</script>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" name="Submit2" value="Submit">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
mophi 2002-03-31
  • 打赏
  • 举报
 回复

for (var i=0;i<select1.options.length;i++) {
var op=document.createElement("option")
op.text=select1.options[i].text;
op.value = select1.options[i].value;
select2.add(op)
}
用select.options.length而不用select.length,因為在select有同名時,select.length是同名select個數,
用
<script>
for(var item in selectObj)
{
document.write(item,"=",selectObj[item],"<br>")
}
</script>
可打印出select的所有屬性.
qiushuiwuhen 2002-03-31
  • 打赏
  • 举报
 回复
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function move1(from,to){
for (var i=0;i<from.options.length;i++) {
if(!from.options[i].selected)continue;
var op=document.createElement("option")
op.text=from.options[i].text;
op.value = from.options[i].value;
to.add(op)
}
}

function move2(from){
for (var i=from.options.length-1;i>=0;i--) {
if(!from.options[i].selected)continue;
from.remove(i)
}
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<div align="center"><table width="30%" border="0">
<tr>
<td rowspan="2">
<div align="center">
<select name="select1" size="10" style="width:120" 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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</td>
<td height="64">
<div align="center">
<input type="button" name="Submit" value=">>" onclick=move1(document.form1.select1,document.form1.select2)>
</div>
</td>
<td rowspan="2">
<div align="center">
<select name="select2" size="10" style="width:120" multiple>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" name="Submit2" value="<<" onclick=move2(document.form1.select2)>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
weidegong 2002-03-31
  • 打赏
  • 举报
 回复
说明：
1.有点画蛇添足的功能，就是右边的会自动排序。懒的改了。
2.单击按钮submit2后,select2中被选择的项被清除(select1中的内容不变):这句有歧义，到底是原来的内容保持不变还是选择后保持不变？我提供的代码是原来数据保持不变

有空了去给我的问题提提意见：
http://www.csdn.net/expert/topic/606/606318.xml?temp=.2741053
weidegong 2002-03-31
  • 打赏
  • 举报
 回复
哈哈，你不就是要这个吗，给你个更完美的
－－－－－－－－－－－－－－－－－－－－－－－
<html>
<head>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<body bgColor=skyblue>
<form action="select.htm" method="post" name="myform">
<br>
<br>
<br>
<div align="center">
<center>
<left>
<table style="FONT-SIZE: smaller">
<tr>
<td width="116">
<table>
<tr>
<td>
<select name="left_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
<OPTION VALUE="D">D</OPTION>
<OPTION VALUE="E">E</OPTION>
<OPTION VALUE="F">F</OPTION>
<OPTION VALUE="G">G</OPTION>
<OPTION VALUE="H">H</OPTION>
<OPTION VALUE="I">I</OPTION>
<OPTION VALUE="J">J</OPTION>
<OPTION VALUE="K">K</OPTION>
<OPTION VALUE="L">L</OPTION>
<OPTION VALUE="M">M</OPTION>
<OPTION VALUE="N">N</OPTION>
<OPTION VALUE="O">O</OPTION>
<OPTION VALUE="P">P</OPTION>
</select>
</td>
</tr>
</table>
</td>
<td width="43">
<table border="0">
<br>
<tr>
<td>
<INPUT language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add any" type=button value="8">
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add all" type=button value=: DESIGNTIMESP="17713">
</td>
</tr>
<tr>
<td> <br>
<br>
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete any" type=button value="7">
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete all" type=button value="9">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</TD>
<td width="119">
<table style="FONT-SIZE: smaller">
<tr>
<td>
<select name="right_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
</select>
</td>
</tr>
</table>
</td>
<td width="10">  </td>
</TR>
</TABLE>
</center>
</div>
</form>
</body>
</html>

<script language="javascript">
function fun_select_addany(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].selected == true){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
theform.left_select.options.remove(i);
i--;
}
}
sort_select(document.myform);
}

function fun_select_addall(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
}
theform.left_select.length=0;
sort_select(document.myform);
}

function fun_select_dltany(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
if (theform.right_select.options[i].selected == true){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
theform.right_select.options[i] =new Option("");
theform.right_select.options.remove(i);
i--;
}
}
sort_select(document.myform);
}

function fun_select_dltall(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
}
theform.right_select.length=0;
sort_select(document.myform);
}


function sort_select(theform){
var i;
var left_array= new Array();
for (i=0;i<theform.left_select.length;i++){
left_array[i] = new Array(theform.left_select.options[i].text);
}

left_array.sort();

theform.left_select.length=0;

for (i=0;i<left_array.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);
}

left_array= new Array();
}
</script>
superrr 2002-03-31
  • 打赏
  • 举报
 回复
(1)首先在select1中进行选择,然后单击按钮submit1,select1中被选择的项出现在select2中(select1中的内容不变)
(2)单击按钮submit2后,select2中被选择的项被清除(select1中的内容不变)

帖子再加30分
8988 2002-03-30
  • 打赏
  • 举报
 回复
setect1.selectedIndex [=index] 返回(设置)被选择的option对象列号.

cnprogrammer 2002-03-30
  • 打赏
  • 举报
 回复
select2.length = select1.length
for (var i=0;i<select1.length;i++) {
select2.options[i].text = select1.options[i].text;
}

select框有好多属性，基本的如：text，value等
还可以自定义属性，如：
<select otherPro="other" name=""><option></option></select>
事件和方法与别的控件对象类似
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
在这个主题中，“25个免费的HTML5 CSS3 jQuery下拉菜单”是一个集合，它包含了多种使用这些技术实现的下拉菜单模板，供开发者在构建网站时选用。 HTML5作为最新的超文本标记语言标准，提供了更强大的语义化元素，如...
jsTreeSelect jquery 树形下拉菜单
要实现jsTreeSelect，首先需要在HTML中创建一个基础的下拉菜单元素（`<select>`）。然后，通过jQuery选择这个元素，并调用jsTree插件的相关方法，将其转换为树形结构。这通常涉及以下步骤： - 引入jQuery和jsTree库...
jQuery EasyUI 1.3.5 离线简体中文API文档
combo：修复点击页面某一个combo组件的下拉列表时触发的“onHidePanel”事件会导致页面上其他combo组件的下拉列表被关闭的问题； combogrid：修复某些从combo组件继承来的方法无法使用的问题。 Improvement（改进...
JQuery遍历select下拉选项的方法
$ ("select:[id='selA'] option" ). each( function () { alert ( $ ( this). text ()); if($(this).text()=='数码产品'){ $(this).attr("selected","selected");
layui 自定义动态添加select下拉菜单中的内容展示
layui 自定义动态添加select下拉菜单中的内容展示。
JavaScript

87,996

社区成员

224,693

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章