Js相關(guān)技術(shù)select下拉列表 需求分析我們的商品通常包含已經(jīng)有了的, 還有沒有的,現(xiàn)在我們需要有一個(gè)頁面用于動(dòng)態(tài)編輯這些商品 步驟分析1. 導(dǎo)入JQ的文件 2. 文檔加載函數(shù) :頁面初始化 3.確定事件 : 點(diǎn)擊事件 onclick 4. 事件觸發(fā)函數(shù) 1. 移動(dòng)被選中的那一項(xiàng)到右邊 代碼實(shí)現(xiàn)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步驟:
1. 導(dǎo)入JQ的文件
2. 文檔加載函數(shù) :頁面初始化
3.確定事件 : 點(diǎn)擊事件 onclick
4. 事件觸發(fā)函數(shù)
1. 移動(dòng)被選中的那一項(xiàng)到右邊
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被選中的那一項(xiàng)
//將被選中項(xiàng)添加到右邊
$("#rightSelect").append($("#leftSelect option:selected"));
});
//將左邊所有商品移動(dòng)到右邊
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類名稱</td>
<td><input type="text" value="手機(jī)數(shù)碼"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text" value="這里面都是手機(jī)數(shù)碼"/></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>波導(dǎo)</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>
|
|
|
