利用js来控制下拉列表左右选择

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

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

技术分析

ondblclick=”selectOne()”//双击事件

multiple=”multiple”//select标签的属性

代码实现:

<!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 >=0; i–){                   var option1 = options[i];

rightSelect.appendChild(option1);

}

}

 

 

</script>

</head>

<body>

<table border=”1px” width=”400px”>

<tr>

<td>分类名称</td>

<td><input type=”text” value=”手机数码”/></td>

</tr>

<tr>

<td>分类描述</td>

<td><input type=”text” value=”这里面都是手机数码”/></td>

</tr>

<tr>

<td>分类商品</td>

<td>

<!–左边–>

<div style=”float: left;”>

已有商品<br />

<select multiple=”multiple” id=”leftSelect” ondblclick=”selectOne()”>

<option>华为</option>

<option>小米</option>

<option>锤子</option>

<option>oppo</option>

</select>

<br />

<a href=”” onclick=”selectOne()”> &gt;&gt; </a> <br />

<a href=”” onclick=”selectAll()”> &gt;&gt;&gt; </a>

</div>

<!–右边–>

<div style=”float: right;”>

未有商品<br />

<select multiple=”multiple” id=”rightSelect”>

<option>苹果6</option>

<option>肾7</option>

<option>诺基亚</option>

<option>波导</option>

</select>

<br />

<a href=””> &lt;&lt; </a> <br />

<a href=””> &lt;&lt;&lt; </a>

</div>

</td>

</tr>

<tr>

<td colspan=”2″>

<input type=”submit” value=”提交”/>

</td>

</tr>

</table>

</body></html>

以上就是如何利用js来控制下拉列表左右选择的详细内容,更多请关注网站的其它相关文章!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6071.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注