广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

微信小程序设计方案_JS控制下拉列表左右选择实

日期:2021-01-05 浏览:
JS控制下拉列表左右选择实例代码       在本篇内容中小编给各位分享的是关于如何使用JS控制下拉列表左右选择的实例代码,需要的朋友们可以参考下。

需求分析

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品

技术分析

ondblclick="selectOne()":双击事件

select标签的属性multiple="multiple":

代码实现

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title /title 
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
 script 
function selectOne(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i options.length; i++){
var option1 = options[i];
if(option1.selected){
//2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
//将左边所有的商品移动到右边
function selectAll(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i i--){
var option1 = options[i];
rightSelect.appendChild(option1);
 /script 
 /head 
 body 
 table border="1px" width="400px" 
 td 分类名称 /td 
 td input type="text" value="手机数码"/ /td 
 /tr 
 td 分类描述 /td 
 td input type="text" value="这里面都是手机数码"/ /td 
 /tr 
 td 分类商品 /td 
 !--左边-- 
 div 
已有商品 br / 
 select multiple="multiple" id="leftSelect" ondblclick="selectOne()" 
 option 华为 /option 
 option 小米 /option 
 option 锤子 /option 
 option oppo /option 
 /select 
 br / 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a br / 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a 
 /div 
 !--右边-- 
 div 
未有商品 br / 
 select multiple="multiple" id="rightSelect" 
 option 苹果6 /option 
 option 肾7 /option 
 option 诺基亚 /option 
 option 波导 /option 
 /select 
 br / 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a br / 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a 
 /div 
 /td 
 /tr 
 td colspan="2" 
 input type="submit" value="提交"/ 
 /td 
 /tr 
 /table 
 /body 
 /html 

实例补充:

 !DOCTYPE html 
 html 
 head 
 title JavaScript下拉列表左右选择 /title 
 meta http-equiv="content-type" content="text/html; charset=UTF-8" 
 script type="text/javascript" 
 function chooseToRight()
 var op=document.getElementById("s1").getElementsByTagName("option");
 var select2=document.getElementById("s2");
 var k=op.length;
 for(var i=0;i i++)
 if(op[i].selected==true) 
 select2.appendChild(op[i]);
 k--;i--; //这里要特别注意!!!因为appendChild相当于剪切,所以每次循环之后要执行k--,i--
 function chooseToLeft()
 var op=document.getElementById("s2").getElementsByTagName("option");
 var select2=document.getElementById("s1");
 var k=op.length;
 for(var i=0;i i++)
 if(op[i].selected==true) 
 select2.appendChild(op[i]);
 k--;i--;
 function allToLeft()
 var op=document.getElementById("s2").getElementsByTagName("option");
 var select2=document.getElementById("s1");
 var k=op.length;
 for(var i=0;i i++)
 select2.appendChild(op[i]);
 k--;i--;
 function allToRight()
 var op=document.getElementById("s1").getElementsByTagName("option");
 var select2=document.getElementById("s2");
 var k=op.length;
 for(var i=0;i i++)
 select2.appendChild(op[i]);
 k--;i--;
 /script 
 /head 
 body 
 div 
 select id="s1" multiple="multiple" 
 option AAAAAAA /option 
 option BBBBBBB /option 
 option CCCCCCC /option 
 option DDDDDDD /option 
 option EEEEEEE /option 
 /select br br 
 input type="button" value="选中添加到右边" / br br 
 input type="button" value="全部添加到右边" / br 
 /div 
 div 
 select id="s2" multiple="multiple" 
 option 1111111 /option 
 option 2222222 /option 
 option 3333333 /option 
 option 4444444 /option 
 option 5555555 /option 
 /select br br 
 input type="button" value="选中添加到左边" / br br 
 input type="button" value="全部添加到左边" / br 
 /div 
 /body 
 /html 

到此这篇关于JS控制下拉列表左右选择实例代码的文章就介绍到这了,更多相关如何使用JS控制下拉列表左右选择内容请搜索凡科以前的文章或继续浏览下面的



新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系