使用JQuery完成下列列表左右选择
程序员文章站
2022-07-02 15:36:03
使用JQuery完成下列列表左右选择 Js相关技术 select下拉列表 multiple 允许多选 ondblclick : 双击事件 for循环遍历,一边遍历一边移除出现的问题 需求分析 我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品 步骤 ......
使用jquery完成下列列表左右选择
js相关技术
select下拉列表
multiple 允许多选
ondblclick : 双击事件
for循环遍历,一边遍历一边移除出现的问题
需求分析
我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品
步骤分析
1. 导入jq的文件 2. 文档加载函数 :页面初始化 3.确定事件 : 点击事件 onclick 4. 事件触发函数 1. 移动被选中的那一项到右边
代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
步骤:
1. 导入jq的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
1. 移动被选中的那一项到右边
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightselect").append($("#leftselect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightselect").append($("#leftselect option"));
});
});
</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">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1" > >> </a> <br />
<a href="#" id="a2"> >>> </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="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>