requirement analysis
In our classification management, we need to be able to modify our classification information. When we make a little modification, we need to jump to an editable page, where we can modify the classification name, classification description, and classification goods
technical analysis
ondblclick="selectOne()": double click event
select the attribute of the tag multiple="multiple":
code implementation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- //Step analysis 1. Identify events: Click event :onclick Event 2. Event to trigger function selectOne 3. selectOne Do something (Move the selected element on the left to the one on the right select in) 1. Get left Select Selected elements in 2. Add the selected element to the Select Middle is fine --> <script> function selectOne(){ // 1. get the selected elements in the Select on the left var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //Find Select on the right var rightSelect = document.getElementById("rightSelect"); //Traverse to find the selected option for(var i=0; i < options.length; i++){ var option1 = options[i]; if(option1.selected){ // 2. Add the selected element to Select on the right rightSelect.appendChild(option1); } } } //Move all items on the left to the right function selectAll(){ // 1. Get the selected element in the left Select var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //Find Select on the right var rightSelect = document.getElementById("rightSelect"); //Traverse to find the selected 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>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" ondblclick="selectOne()"> <option>HUAWEI</option> <option>millet</option> <option>Hammer</option> <option>oppo</option> </select> <br /> <a href="#" onclick="selectOne()"> >> </a> <br /> <a href="#" onclick="selectAll()"> >>> </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>