select multi 选择框操作类

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title>js select 操作类</title>
<script type="text/javascript" src="http://www.d*e*s*ign<a%20href=" http: target="_blank">css.org/jquery-plugin/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.desi**gn*css.org/jquery-plugin/js/mySelect.class.js"></script>
<link rel="stylesheet" href="http://www.*design*c*ss.org/jquery-plugin/imgcss/layoutstyle.css" media="all">

<div style="  margin:0 auto">
    <div style="margin:50px 0; float:left; ">
        <form action="###" method="post">
            <div style="float:left;">
                <select ondblclick="test.movetoright();" multiple class="select_left" style="display:block;overflow:visible;">
                    <option value="1">求购商</option>
                    <option value="2">供应商</option>
                    <option value="3">产品分类</option>
                    <option value="4">网站地图</option>
                    <option value="5">友情链接</option>
                    <option value="6">关于我们</option>
                    <option value="7">联系我们</option>
                    <option value="8">成功故事</option>
                </select>
                <p>
                    <strong></strong>
                    <strong></strong>
                    <strong></strong>
                    <strong></strong>
                </p>
            </div>
            <div style=" float:left; padding:8px;">
            	<p style=" padding-bottom:12px;"><input onclick="test.movetoright()" type="button" class="button_movetoright" value=">>"></p>
                <p><input onclick="test.movetoleft();" type="button" class="button_movetoleft" value="<<"></p>
            </div>
            <div style=" float:left;">
                <select ondblclick="test.movetoleft();" style="  border:1px solid #ccc; overflow:visible; " class="select_right" multiple>
                </select>
                <p>
                    <strong></strong>
                    <strong></strong>
                    <strong></strong>
                    <strong></strong>
                </p>
            </div>	
      </form>
    </div>
    <div style=" margin:50px 0;  float:left;">
        <form action="###" method="post">
            <div style=" float:left;">
                <select ondblclick="test2.movetoright();" multiple class="select_left2" style="   border:1px solid #ccc; overflow:visible;">
                    <option value="1">求购商</option>
                    <option value="2">供应商</option>
                    <option value="3">产品分类</option>
                    <option value="4">网站地图</option>
                </select>
                <p><input onclick="test2.movetoright()" type="button" class="button_movetoright2" value=">>"></p>
            </div>
            <div style=" float:right;">
                <select ondblclick="test2.movetoleft();" style="  border:1px solid #ccc; overflow:visible; " class="select_right2" multiple>
                </select>
                <p><input onclick="test2.movetoleft();" type="button" class="button_movetoleft2" value="<<"></p>
            </div>	
      	</form>
    </div>
</div>    
    <script type="text/javascript">
        var test=new mySelect();
        var test2=new mySelect();
        test2.sel_left=".select_left2";
        test2.sel_right=".select_right2";
    </script>

提示：您可以先修改部分代码再运行

select multi 选择框操作类

相关文章

精彩推荐