JavaScript实现下拉列表选择框

本文实例为大家分享了JavaScript实现下拉列表选择框的具体代码,供大家参考,具体内容如下

创建一个页面

** 两个下拉选择框
    - 设置属性 multiple属性 -multiple="multiple"(下拉选择框多行显示)
** 四个按钮,有事件

tip:多选按住ctrl或者shift点击选项

代码如下:

<html >
 <head>

  <title>HTML示例</title>
  <style type = "text/css">
  div#left{
 float:left;
  }

  </style>
 </head>
 <body>
 <div id="left" ">
  <div >
    <select id="select1" multiple="multiple" style="width:100px;height:1ss00px">
   <option>AAAAAA</option>
   <option>BBBBBB</option>
   <option>CCCCCC</option>
   <option>DDDDDD</option>
   <option>EEEEEE</option>
    </select><br/>
    </div>

    <div>
    <input type="button" value="选中添加到右边" onclick="selToRight()"/><br/>
    <input type="button" value="全部添加到右边" onclick="selAllRight()"/>
    </div>
   </div>

 <div id="right">
    <div >
    <select id="select2" multiple="multiple" style="width:100px;height:1ss00p">
  <option>FFFFFF</option>
    </select><br/>
    </div>

    <div>
    <input type="button" value="选中添加到左边" onclick="selToLeft()"/><br/>
    <input type="button" value="全部添加到左边" onclick="selAllLeft()"/>
    </div>
 </div>

 </body>
 <script type="text/javascript">
// 选中添加到左边
function selToLeft(){
 //获取左边select对象
  var s1 = document.getElementById("select1");
  //获取右边select对象
  var s2 = document.getElementById("select2");
  //得到左边select对象中的每一个option
  var ops = s2.getElementsByTagName("option");
  for(var i4=0;i4<ops.length;i4++){
   op4=ops[i4];
   if(op4.selected==true){
   s1.appendChild(op4);
   i4--;
   }
  }
}

 //全部添加到左边
  function selAllLeft(){
  //获取左边select对象
  var s1 = document.getElementById("select1");
  //获取右边select对象
  var s2 = document.getElementById("select2");
  //得到左边select对象中的每一个option
  var ops = s2.getElementsByTagName("option");
  for(var i3=0;i3<ops.length;i3++){
   op3=ops[i3];
   s1.appendChild(op3);
   i3--;
  }
 }
 //全部添加到右边
  function selAllRight(){
  //获取左边select对象
  var s1 = document.getElementById("select1");
  //获取右边select对象
  var s2 = document.getElementById("select2");
  //得到左边select对象中的每一个option
  var ops = s1.getElementsByTagName("option");
  for(var i2=0;i2<ops.length;i2++){
   op2=ops[i2];
   s2.appendChild(op2);
   i2--;
  }
 }
  //选中添加到右边
 function selToRight(){
  /*
   步骤:
   1.获取select里面的option
    -getElementByTagName()-返回一个数组
    -遍历数组,得到每一个option
   2.判断option是否被选中
    -属性selected,判断是否被选中
     -selected=true;选中
     -selected=false;未选中
   3.如果选中,把选中的添加到右边
   4.得到select2
   5.添加选择的部分
    -appendChild()方法
  */
  //获取左边select对象
  var s1 = document.getElementById("select1");
  //获取右边select对象
  var s2 = document.getElementById("select2");
  //得到左边select对象中的每一个option
  var ops = s1.getElementsByTagName("option");
  //遍历ops数组得到每一个option选中状态
  for(var i1=0;i1<ops.length;i1++){
   op1 = ops[i1];
   //判断每一个option中selected属性是否选中
   if(op1.selected == true){
    //如果选中,添加到右边select中
     //-使用appendChild()方法
    s2.appendChild(op1);
    //每次添加都会使数组长度减一,i1++后长度出现异常,所以我们要--;
    i1--;
   }
  }
 }

   </script>

</html>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-10

js使下拉列表框可编辑不止是选择

复制代码 代码如下: <script> function clearOption(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; if(currKey == 8){ obj.options[0].text = ""; } } function writeSelect(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.

JS控制下拉列表左右选择实例代码

使用JS控制下拉列表左右选择 需求分析 在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品 技术分析 ondblclick="selectOne()":双击事件 select标签的属性multiple="multiple": 代码实现 <!DOCTYPE html> <html> <head> <meta charset=&

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

javascript实现通过拼音首字母快速选择下拉列表

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉列表快速选择</title> <script type="text/javascript" language="JavaScript">// 获取拼音首字母function ge

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

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

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

jquery+json 通用三级联动下拉列表

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

js获取下拉列表框&lt;option&gt;中的value和text的值示例代码

在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得<option value="value">ShowText</option>中"ShowText",我们该如何获取呢?方法很简单,具体代码如下: 复制代码 代码如下: <script type="text/javascript">function a(object){alert(o

纯js代码生成可搜索选择下拉列表的实例

1.因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >: 2.需要引入jquery-1.8.3.js版本的jquery 话不多说,代码实现如下: var selectData=

javaScript年份下拉列表框内容为当前年份及前后50年

javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 var endYear=myDate.

JavaScript实现下拉列表框数据增加、删除、上下排序的方法

本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function

JavaScript实现复制内容到粘贴板代码

最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

JavaScript判断DIV内容是否为空的方法

1.问题背景 判断div内部是否为空,如果为空,给出无数据提示:否则显示正常页面 2.实现效果图如下所示: 3.设计源码 <!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/xh

javascript 获取FCKeditor内容

形式如: 复制代码 代码如下: varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.GetXHTML(true); ************************************************* 利用Javascript取和设FCKeditor值也是非常容易的,如下: 复制代码 代码如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(Editor

javascript打印html内容功能的方法示例

复制代码 代码如下: <!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=&qu

javascript获取下拉列表框当中的文本值示例代码

近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码: 复制代码 代码如下: <select onchange="isSelected(this.value);" id="city"> <option value="1">北京</option> <option value="2" >上海</option> <

JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>

javascript dom追加内容实现示例

复制代码 代码如下: <!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=&qu

基于JavaScript实现新增内容滚动播放效果附完整代码

先给大家展示下效果图: 完整demo如下 每两秒随机向上或者向下滚动,如果要替换新内容,则通过html()更新内容即可(查看注释代码) <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content=&q