HTML下拉列表的左右选择

这是基于html的下拉列表的左右选择的案例；页面效果如下：

具体代码如下：

<html><head><title>Document</title></head><body><div id="s1" style="float:left"><div><select id="select1" multiple="multiple" style="widyh=100px;height=100px"><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select></div><div><input type="button" value = "choice>>" onclick="selectLeft()"/><br/><input type="button" value = "all>>" onclick="allLeft()"/><br/></div>
</div><div id="s2" ><div><select select id="select2" multiple="multiple" style="widyh=100px;height=100px"><option >海马</option></select></div><div><input type="button" value = "<<choice" onclick="selectRight()"/><br/><input type="button" value = "<<all" onclick="allRight()"/><br/></div>
</div>
</body>
<script type ="text/javascript">function selectLeft(){var select2 = document.getElementById("select2");var select1 = document.getElementById("select1");var options1= select1.getElementsByTagName("option");for (var i=0;i<options1.length ;i++ ){option1=options1[i];if(option1.selected==true){select2.appendChild(option1);i--;}}}function allLeft(){var select2 = document.getElementById("select2");var select1 = document.getElementById("select1");var options1= select1.getElementsByTagName("option");for (var i=0;i<options1.length ;i++ ){option1=options1[i];select2.appendChild(option1);i--;}}function selectRight(){var select2 = document.getElementById("select2");var select1 = document.getElementById("select1");var options2= select2.getElementsByTagName("option");for (var a=0;a<options2.length ;a++ ){option2=options2[a];if(option2.selected==true){select1.appendChild(option2);a--;}}}function allRight(){var select2 = document.getElementById("select2");var select1 = document.getElementById("select1");var options2= select2.getElementsByTagName("option");for (var a=0;a<options2.length ;a++ ){option2=options2[a];select1.appendChild(option2);a--;}}</script>
</html>

HTML下拉列表的左右选择相关推荐

java 是怎么在中删除下拉列表_删除在一个下拉列表字段中选择的选项，并且不显示在该行中存在的其他下拉列表中不工作-jquery...
我有一个包含多列的html表,在两列中我显示下拉列表 . 当用户从一个下拉列表中选择值时(选择Product1或Select Product2下拉列表),我想删除在一个下拉列表中选择的选项,并且不要在 ...
html下拉列表默认未选择,Html.DropdownListFor未设置选定值
您的代码存在一些概念问题: 首先,@Html.DropDownListFor(n => n.OrderTemplates, new SelectList(Model.OrderTemplates ...
select 选择器php,php – 选择laravel 5.4中下拉列表的选定值
我有一个名为指定的下拉列表,用户将选择其中一个,并在提交后,如果有一些错误,那么我想选择所选的指定. 我在laravel 5.4中使用它. 调节器 $info = DB::table("de ...
下拉选择框其他_列表框 vs 下拉列表，哪个更好？
许多UI控件允许用户选择选项,它们包括复选框.单选按钮.切换开关.步进器.列表框和下拉列表. 在本文中,作者对列表框和下拉列表进行了定义,讨论何时使用各个元素,以及各个情况下使用哪一种更加合适. 摘要 ...
python下拉菜单_python-web自动化：下拉列表操作
非select/option元素: 1.触发下拉列表出现 2.等待下拉列表中的元素出现,然后进行选择元素即可. select/option元素: 下拉框操作-Select类 selenium提供Sel ...
改变静态文本notify 属性_CocosCreator脚本属性个性化定制——下拉列表属性、滑动条属性...
一.声明属性要声明属性,需要在 cc.Class 定义的 properties 字段中,填写属性名字和属性参数.在此处声明的属性在Cocos Creator编辑器属性检查器面板中可以读取和编辑.如下 ...
定义一个属性_CocosCreator脚本属性个性化定制——下拉列表属性、滑动条属性
一.声明属性要声明属性,需要在 cc.Class 定义的 properties 字段中,填写属性名字和属性参数.在此处声明的属性在Cocos Creator编辑器属性检查器面板中可以读取和编辑.如下 ...
tkinter如何lable重复显示到同一行中_如何创建包含 CAD 导入和选择的仿真 App
在使用 COMSOL 软件二次开发的过程中,你可能会遇到这样的问题:如何使用 App 开发器创建可以处理 CAD 导入并能让用户交互式选择边界条件的仿真 App?我需要了解编程吗?今天我们将为您介绍在 ...
（转）基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用...
http://www.cnblogs.com/wuhuacong/p/4761637.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JST ...

HTML下拉列表的左右选择

这是基于html的下拉列表的左右选择的案例；页面效果如下：

具体代码如下：

HTML下拉列表的左右选择相关推荐

最新文章

热门文章