JS实现支持多选的遍历下拉列表代码

本文实例讲述了JS实现支持多选的遍历下拉列表。分享给大家供大家参考。具体如下：

这里使用js实现可进行多项选择的下拉列表，鼠标点击上边下拉列表中的任意值，下边列表中就会显示该选中值，按住键盘上的Ctrl键，再次点击上边的列表任意值，可进行多选，多选功能得益于JavaScript的帮忙，在网页上这种应用挺广泛，有必要看一看。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-select-option-cha-codes/

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>遍历多选择下拉列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.wenbenkuang {
 font-family: "宋体";
 font-size: 9pt;
 color: #333333;
 border: 1px solid #999999;
}
</style>
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
 <table width="300" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FFCC00">
 <tr>
  <td height="22" align="left" bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#FFFFFF"><select name="mcusep" size="4" multiple class="wenbenkuang"
onchange="updateorder()">
  <option value="JavaScript程序设计">JavaScript程序设计</option>
  <option value="JavaScript经典教程">JavaScript经典教程</option>
  <option value="JavaScript范例宝典">JavaScript范例宝典</option>
  <option value="JavaScript与CSS样式">JavaScript与CSS样式</option>
  <option value="JavaScript与HTML">JavaScript与HTML</option>
  </select></td>
 </tr>
 <tr>
  <td height="22" align="left" background="images/bg.gif" bgcolor="#FFFFFF">显示所选内容:</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#FFFFFF"><textarea name="textarea" cols="40" rows="6" class="wenbenkuang"></textarea></td>
 </tr>
 </table>
</form>
<script language="javascript">
function updateorder()
{
 var orderstring="";
 var n=document.form1.mcusep.length;
 for (i=0;i<n;++i)
 {
 if (document.form1.mcusep.options[i].selected)
 {
  orderstring+=document.form1.mcusep.options[i].value+"\n";
 }
 }
 document.form1.textarea.value=orderstring;
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript下拉列表菜单的实现方法

    javascript下拉列表菜单的实现方法

    之前写过这个<javascript下拉列表中显示树形菜单的实现方法>菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看.现在采用table来封装,我们知道table的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多. 1.点击之后都可以并存的情况(只需函数写法不一样就可) dispaly也是自己设置的,通过父节点来操作子节点,显示与否: /* function open1(node){ //通过父节点来操作兄弟节点 当点击之后出现之后,直接就能打开

  • JS+DIV+CSS实现仿表单下拉列表效果

    JS+DIV+CSS实现仿表单下拉列表效果

    本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> &

  • extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    复制代码 代码如下: var showForm; function panelShowForm() { showForm=null; showForm = new Ext.FormPanel({ renderTo:"showPanel", region:'north', border:false, bodyBorder:false, frame:true, waitMsgTarget: true, labelAlign:'right', id:"showForm",

  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • JS获取下拉列表所选中的TEXT和Value的实现代码

    如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • JS显示下拉列表框内全部元素的方法

    本文实例讲述了JS显示下拉列表框内全部元素的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以通过alert框显示指定下拉列表的全部元素 <!DOCTYPE html> <html> <head> <script> function getOptions() { var x=document.getElementById("mySelect"); var txt="All options: "; var i;

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • js实现下拉列表选中某个值的方法(3种方法)

    本文实例讲述了js实现下拉列表选中某个值的方法.分享给大家供大家参考,具体如下: 方法1: <select id="aa"> <option>1</option> <option>2</option> </select> <input type="button" value=" 选中" onclick="checkOption()" /> &l

  • javascript如何操作HTML下拉列表标签

    先给大家讲下大概实现思路,具体内容介绍请看下面. 判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中的项 修改select选项中 value="paraValue"的text为"paraText" 设置select中text="paraText"的第一个Item为选中 设置select中value=

  • javascript下拉列表中显示树形菜单的实现方法

    javascript下拉列表中显示树形菜单的实现方法

    很简单的一个使用:点击菜单,能够显示下面的或者不显示. 1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常

随机推荐