Implement drop down box based on jQuery

Drop-down boxes are often encountered in projects. In today's era of flat and responsive layout, it is necessary to use jQuery to implement drop-down boxes, and it will be much more beautiful. Here is a piece of code based on jQuery drop-down boxes.

JQuery code:

        $(function(){ 

            $('#add').click(function(){ 

                var $options = $('#select1 option:selected'); 

                $options.appendTo("#select2"); 

            }); 

            $('#remove').click(function(){ 

                var $options = $('#select2 option:selected'); 

                $options.appendTo("#select1"); 

            }); 

            $('#add_all').click(function(){ 

                var $options = $('#select1 option'); 

                $options.appendTo("#select2"); 

            }); 

            $('#remove_all').click(function(){ 

                var $options = $('#select2 option'); 

                $options.appendTo("#select1"); 

            }); 

            $('#select1').dblclick(function(){ 

               var $options = $("option:selected",this); //Gets the selected option 

                $options.appendTo('#select2'); 

            }); 

            $('#select2').dblclick(function(){ 

                var $options = $("option:selected",this); //Gets the selected option 

                $options.appendTo('#select1'); 

            }); 

        }); 

HTML code:

   <div style="width: 250px"> 

   <div class="content" style="float: left"> 

       <select multiple id="select1" style="width: 100px;height: 160px;"> 

           <option value="1"> options 1</option> 

           <option value="2"> options 2</option> 

           <option value="3"> options 3</option> 

           <option value="4"> options 4</option> 

           <option value="5"> options 5</option> 

           <option value="6"> options 6</option> 

           <option value="7"> options 7</option> 

           <option value="8"> options 8</option> 

       </select> 

       <div> 

           <span id="add"> Select add to the right >></span><br> 

           <span id="add_all"> Add them all to the right >></span> 

       </div> 

   </div> 

   <div style="float: right;"> 

       <select multiple id="select2" style="width: 100px;height: 160px;"> 

       </select> 

       <div> 

           <span id="remove"><< Select and delete to the left </span><br> 

           <span id="remove_all"><< Delete everything to the left </span> 

       </div> 

   </div> 

</div>

Isn't it simple? If they need it, they can use it directly in the project.