select选中值左右框移动

<select name="choice" id="choice" multiple>
        <option value="1">属性</option>
        <option value="2">运维</option>
        <option value="3">网络</option>
        <option value="5">电脑</option>
    </select>
    <select name="choice1" id="choice1" multiple>
        <option value="1">属性1</option>
        <option value="2">运维2</option>
        <option value="3">网络3</option>
        <option value="5">电脑4</option>
    </select>
    <input type="button" value="提交" id="submit">
    <input type="button" value=">>>" id="right">
    <input type="button" value="<<<" id="left">
    <script>
        $("#submit").click(function(){
            //option=$("#choice option:selected");
            var option=$("#choice")[0].selectedOptions;
            alert(option[1].value);
            //alert(option.text());
            //alert(option[0].value);
        });
        $("#right").click(function(){
            var option=$("#choice")[0].selectedOptions;        //将$("#choice")后边加上[0],就将jQuery对象转化为dom对象,使其具有js属性
            while(option.length>0){
                $(option[0]).appendTo("#choice1");
            }
        });
     $("#left").click(function(){
        var option=$("#choice1")[0].selectedOptions;
        while(option.length>0){
            $(option[0]).appendTo("#choice");
        }
    });
    </script>

 

posted @ 2018-05-26 20:45  MISF  阅读(712)  评论(0)    收藏  举报
     JS过度和变形效果演示   
  
    html5.png