使用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>
