Use JQuery to complete the following list of left and right selections

Keywords: Javascript Mobile JQuery

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" > &gt;&gt; </a> <br />
                <a href="#" id="a2"> &gt;&gt;&gt; </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="#"> &lt;&lt; </a> <br />
                <a href="#"> &lt;&lt;&lt; </a>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="Submission"/>
        </td>
    </tr>
</table>


</body>
</html>

Posted by Jas on Thu, 07 May 2020 07:35:11 -0700