JQuery drop-down box app extension

An example of a jquery book

The book only writes from the left to the right, nothing more than the Remove () method and the AppendTo () method.

However, I have tried, and it is not as simple as adding from the left to the right to remove the right side to the left.

Then you can add to each other on either side.

The HTML code is as follows:

<Divclass= "equips">    <Div>        <Pclass= "Tips">You are assigning devices to users: XXX!</P>        <ahref="#"class= "BTN"ID= "Save_equip">Save</a>    </Div>    <formclass= "Equip_list"ID= "Equip_list">        <spanclass= "Show">List of optional devices:</span>        <ul>            <Li>                <inputtype= "text"name= "equips"value= "Device 1">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 2 device 2 device 2">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 3">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 4">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 5">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 6">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 7">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device 8">            </Li>        </ul>    </form>    <formAction= "url"Method= "POST"class= "My_equip_list"ID= "My_equip_list">        <spanclass= "Show">User Device list:</span>        <ul>            <Li>                <inputtype= "text"name= "equips"value= "Device A">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device S">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device D">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device F">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device g">            </Li>            <Li>                <inputtype= "text"name= "equips"value= "Device H">            </Li>        </ul>    </form>    <Divclass= "Btns">        <ahref="#"class= "BTN"ID= "Btn_add">Add >></a>        <ahref="#"class= "BTN"ID= "Btn_remove"><< Delete </a>    </Div></Div>

The jquery code is as follows:

$(function() {init (); //Initialize        $("#btn_add"). On ("click",function(){//Add a button to the left of the list of options, add to the right            varparam ={form_ul: $ ("#my_equip_list ul"), li_selected: $ ("#equip_list ul li.selected")} selected (param);        }); $("#btn_remove"). On ("click",function(){//Delete button to add the right border to the left border            varparam ={form_ul: $ ("#equip_list ul"), li_selected: $ ("#my_equip_list ul li.selected")} selected (param);        }); //Set the input box in a form to be read-only$ (". Equips form Input"). attr ("ReadOnly", "ReadOnly"); //Click Save to submit the user device List form$ ("#save_equip"). On ("click",function(){            $("#my_equip_list"). Form ("Submit");    })            }); functionInit () {//Binding Event Selected Add selected class        varli_s = $ (". Equips form Li"); Li_s.on ("Click",function(){            var_this = $ ( This); _this.hasclass ("Selected")? _this.removeclass ("selected"): _this.addclass ("selected"));    }); }    functionselected (param) {//a series of actions on the selected option Param.li_selected.remove (). AppendTo (Param.form_ul). Removeclass ("Selected"). On ("Click",function(){                            var_this = $ ( This); _this.hasclass ("Selected")? _this.removeclass ("selected"): _this.addclass ("selected"));    }); }

The effect is as follows:

Original:

Add some items to the right:

Selected:

Add to Left:

I feel like I'm so cute

JQuery drop-down box app extension