Js related technology
select drop-down list
Multiple allow multiple selection
ondblclick: double click event
for loop traversal, removing problems while traversing
requirement analysis
Our products usually include what we have and what we don't have. Now we need a page for dynamic editing of these products
Step analysis
1. Import JQ file 2. Document loading function: page initialization 3. Confirm event: click event onclick 4. Event trigger function 1. Move the selected item to the right
code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
step:
1. Import JQ Documents of
2. Document loading function :Page initialization
3.Identify events :　Click event　onclick
4. Event trigger function
1. Move the selected item to the right
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//Find the selected item
//Add selected items to the right
$("#rightSelect").append($("#leftSelect option:selected"));
});
//Move all items on the left to the right
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>Classification name</td>
<td><input type="text" value="Mobile digital"/></td>
</tr>
<tr>
<td>Classification description</td>
<td><input type="text" value="It's all mobile digital"/></td>
</tr>
<tr>
<td>Classified Goods</td>
<td>
<!--left-->
<div style="float: left;">
Existing products<br />
<select multiple="multiple" id="leftSelect">
<option>HUAWEI</option>
<option>millet</option>
<option>Hammer</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1" > >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--Right-->
<div style="float: right;">
No goods<br />
<select multiple="multiple" id="rightSelect">
<option>Apple 6</option>
<option>Kidney 7</option>
<option>NOKIA</option>
<option>Waveguide</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submission"/>
</td>
</tr>
</table>
</body>
</html>