下拉列表框组合

最新推荐文章于 2021-09-06 13:47:21 发布
最新推荐文章于 2021-09-06 13:47:21 发布
阅读量780 收藏
点赞数
分类专栏： JavaScript 文章标签： function button input javascript action table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjgmail/article/details/1388083
版权

效果如下：

<html>

<head>

<title></title>
<script language="javascript" type="text/javascript">
//<
function left_Data(ListBook1,ListBook2)
{
    //如果传的不是一个字符串 可以直接当对象用
    var lb1 =document.getElementById(ListBook1);
    var lb2=document.getElementById(ListBook2);
    var option=lb2.getElementsByTagName("option");
    //下面的表达式可以拿到数据 也可以直接 ListBook1.appendChild 增加元素
    //var option1=ListBook1.getElementsByTagName("option");
    var str="";
    for(var i=0;i<option.length;++i)
    {
        if(option[i].selected)
        {
            lb1.appendChild(CopyElement(option[i]));
            str+=i;
        }
    }
    for(var j=str.length-1;j>=0;--j)
    {
        lb2.removeChild(lb2.options[str.charAt(j)]);
    }
}
//>
function right_Data(ListBook1,ListBook2)
{
    var lb1 =document.getElementById(ListBook1);
    var option=lb1.getElementsByTagName("option");
    var lb2=document.getElementById(ListBook2);
    var str="";
    for(var i=0;i<option.length;++i)
    {
        if(option[i].selected)
        {
            lb2.appendChild(CopyElement(option[i]));
            str+=i;
        }
    }
   
    for(var j=(str.length-1);j>=0;--j)
    {
        lb1.removeChild(lb1.options[str.charAt(j)]);
    }
   
}
//<<
function leftAll_Data(ListBook1,ListBook2)
{
    var lb1 =document.getElementById(ListBook1);
    var lb2=document.getElementById(ListBook2);
    var option=lb2.getElementsByTagName("option");
    for(var i=0;i<option.length;++i)
    {
        lb1.appendChild(CopyElement(option[i]));
    }
    ClearListBox(ListBook2);
}
//>>
function rightAll_Data(ListBook1,ListBook2)
{
    var lb1 =document.getElementById(ListBook1);
    var option=lb1.getElementsByTagName("option");
    var lb2=document.getElementById(ListBook2);
    for(var i=0;i<option.length;++i)
    {
        lb2.appendChild(CopyElement(option[i]));
    }
    ClearListBox(ListBook1);
}
//拷贝元素
function CopyElement(option)
{
    var NewOption = document.createElement("option");
    NewOption.setAttribute("value",option.value);
    NewOption.appendChild(document.createTextNode(option.value));
    return NewOption;
}
//清空元素
function ClearListBox(ListBook)
{
    var lb1=document.getElementById(ListBook);
 while(lb1.childNodes.length>0)
 {
  lb1.removeChild(lb1.childNodes[0]);
 }
}
</script>
</head>

<body>
<form name="frm" method="post" action="">
<table>
    <tr>
        <td>
            <select name="ListBox1" multiple="multiple" rows="5" height="120">
                <option value="aaa">aaa</option>
                <option value="bbb">bbb</option>
                <option value="ccc">ccc</option>
                <option value="ddd">ddd</option>
            </select>
        </td>
        <td>
            <input type="button" value=">" οnclick="right_Data('ListBox1','ListBox2');"/>
            <input type="button" value=">>" οnclick="rightAll_Data('ListBox1','ListBox2');"/>
            <input type="button" value="<" οnclick="left_Data(ListBox1,'ListBox2');"/>
            <input type="button" value="<<" οnclick="leftAll_Data('ListBox1','ListBox2');"/>
        </td>
        <td>
            <select name="ListBox2" multiple="multiple" rows="5" height="120">
                <option value="eee">eee</option>
                <option value="fff">fff</option>
                <option value="ggg">ggg</option>
                <option value="kkk">kkk</option>
            </select>
        </td>
    </tr>
</table>
</form>
</body>

</html>

tjgmail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
易语言取组合框下拉列表高亮文本
07-20
易语言取组合框下拉列表高亮文本源码,取组合框下拉列表高亮文本
MFC串口助手3：下拉框控件应用
qq_41654474的博客
09-25 465
MFC下拉框的简单操作，为串口助手做准备
VisualFreeBASIC基础——下拉列表的使用
rainheart311的专栏
04-08 1317
一、属性 1、Name（名称） 和窗口一样，Name属性是下拉列表类的实例化，我们可以用【名称.属性/方法】来使用下拉列表控件。 2、Style（样式） 可以选择下拉列表的样式。0 - 标签和下拉列表（不可输入和编辑），1 - 文本框和下拉列表（可以输入和编辑），3 - 文本框和列表框（设置该样式时需要把下拉列表的高度拉高，否则看不到列表框）。 3、Sorted（自动排序...
设置下拉框中的选中项
weixin_42442123的博客
11-01 557
点击设置按钮下拉框随机选中 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&q
VS2010 下 MFC下拉列表框的用法
robinson_911的专栏
01-21 1万+
最近在写一个串口程序，需要将下拉列表框的数据全部显示，怎么设置都不对，最后终于找到了设置方法： 二、如何控制Combo Box的下拉长度 1，首先要知道两点：一、那就是在设计界面里，点击一下Combo Box的下拉箭头，此时出现的调整框就是Combo Box的下拉调整框。 2，二、属性里有个 No integral height 钩选项，表示最大长度为设计长度，如果实际内容比设计长度多，
下拉框绑定数据
weixin_44548770的博客
05-07 1316
下拉框绑定数据 下面我们要在VS（使用版本为：Visual Studio 2015）中完成下拉框绑定数据。 首先写一个简单的下拉框，css样式用的是插件（layui.css和bootstrap.min.css），然后回到控制器定义一个方法，SelectAcademe（方法名称）是我们要查询的学院数据. Var 声明一个变量，myModel.SYS_Academe是在数据库模型中的学院表查询数...
网页表单自动填写——下拉列表框、单选框、复选框自动填写方法
06-17
网页表单自动填写——下拉列表框、单选框、复选框自动填写方法
易语言动画框下拉列表源码
06-06
易语言动画框下拉列表源码。@易语言源码分享站。
下拉组合框Combox中的文字显不全怎么解决
07-07
怎么解决下拉组合框Combox中的文字显不全
VS修改数据与下拉框信息回填
m0_46408680的博客
05-09 680
修改数据模态的代码布局： 页面布局： 双击某一行打开模态，但是一开始是什么也没有的，就像下面这张图片： 要想双击某一行，不但弹出模态框，还要获取相关数据的话； 那么就要在控制器上获取数据； 这就是获取数据，然后利用ToList()隐式转换，再利用Json（””,JsonRequestBehavior.AllowGet）返回视图； JsonRequestBehavior.AllowGet：允许Get返回请求； ...
下拉框和文本框组合共用-可以输入的下拉框ok
06-22
下拉框和文本框组合共用-可以输入的下拉框ok
HTML中实现select下拉框和input输入框组合
热门推荐
学弟不想努力了
09-16 1万+
一、下拉框 + 输入框 select下拉框 结合 input框 支持下拉框选择，支持包含内容检索，支持手动输入 <html> <head> <title>可编辑下拉框</title> <meta charset="UTF-8" /> </head> <body> <div class="appNameSele
excel 表做下拉框_Excel工作表的组合框下拉列表
culiao2169的博客
08-14 889
excel 表做下拉框 Excel工作表的组合框下拉列表 (Combo Box Drop Down for Excel Worksheet) Would you prefer a bigger font size for items in a data validation drop down list? Would you save typing time if the words were c...
下拉框和搜索框组合样式_可定制的组合框下拉菜单
cunchi8090的博客
07-18 753
下拉框和搜索框组合样式Downloads 资料下载 The associated files can be downloaded from the following links: 可以从以下链接下载相关文件： Download Demo Project (39.18 KB) 下载演示项目（39....
js_几个下拉框组合成筛选条件
陈工一的博客
12-12 4899
问题背景：到前天为止，把一部分期末任务完成了，于是就可以闲下来写写代码了（开心）。 正文： 我负责实现的一个小任务是在几个下拉框中确定筛选条件，然后组合一下，去后台根据筛选条件拿到数据，再返回到前端，展示出来。具体来说就是下图这样： 3个条件是3个下拉框，在下拉框里面可选择一个值，比如条件1是年级，条件2是班别，条件3是性别，我依次选中“4”“2”“男”，那么点击确定后，就是筛选4年...
select 下拉框的组合
weixin_45677987的博客
09-06 197
1: select 下拉框的组合效果 <el-select style="width: 224px" placehodleer="请选择店铺" v-modle="pageInfoList.storeName" clearable> <el-option-group v-for="group in multipleSelectOption" :key="group.id" :label="group.market" > &lt.
下拉框与文本框联动
OVER_BLOG
11-16 3728
       function look()   {           var se =document.getElementById("se");           var option=se.getElementsByTagName("option");           var str="";           for(var i=0;i           {           
常用javascript
OVER_BLOG
11-16 855
1．让文字不停地滚动 　　＜MARQUEE＞滚动文字＜/MARQUEE＞ 2．记录并显示网页的最后修改时间 　　＜script language=javascript＞ 　　document．write("最后更新时间: " + document．lastModified + "") 　　＜/script＞ 3．关闭当前窗口 　　＜a href="/"onClick="java
VBA中下拉列表框和组合框有什么区别
最新发布
08-27
VBA中下拉列表框和组合框的区别在于： - 下拉列表框只能显示下拉列表中的选项，用户只能从中选择一个选项，而不能直接在下拉列表框中输入文本。 - 组合框同时具有下拉列表的功能，同时还允许用户在组合框中直接输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值