Jquery选择器和插入和css和属性的综合使用(使用两个select下拉框实现并且对jQuery代码复用封装).docxVIP

Jquery选择器和插入和css和属性的综合使用（使用两个select下拉框实现并且对jQuery代码复用封装） 代码如下： !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 title下拉框案例/title style type=text/css .mainDiv { /* border: 1px solid green;*/ width: 300px; height: 300px; margin:0 auto; margin-top:100px; } .div_cont1,.div_cont2,.div_cont3{ width: 90px; height: 250px; border:3px dashed pink; float:left; margin-left:1px; } /style script type=text/javascript src=../js/jquery-1.11.3.js/script /head body div class=mainDiv div id=div_1 class=div_cont1 select id=select_left size=9 multiple=multiple option value=选项1选项1/option option value=选项2选项2/option option value=选项3选项3/option option value=选项4选项4/option option value=选项5选项5/option option value=选项6选项6/option option value=选项7选项7/option option value=选项8选项8/option /select /div div id=div_2 class=div_cont2 input type=button id=b1 value=---/br/ input type=button id=b2 value====/br/ input type=button id=b3 value=---/br/ input type=button id=b4 value====/br/ /div div id=div_3 class=div_cont3 select id=select_right size=9 multiple=multiple option value=选项9选项9/option /select /div /div script type=text/javascript !-- //这段代码是使用创建dom函数方式将jquery处理方法封装在DealSelected函数内，然后在使用jquery方式处理option对象的selected属性时候 //再调用dom方式创建的方法 var $obj_opt=; function DealSelected() { $.each($obj_opt,function() { $(this).removeAttr(selected); }); } $(document).ready(function () { //设置按钮的宽度 $(input[type=button]).css(width,45px); //---按钮代码 $(#b1).click(function () { $(#select_right).append($(#select_left option:selected)); //以下代码为删除option对象的selected属性 $obj_opt=$