<div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7581')">复制内容到剪贴板</span> </div> <div id="code_7581"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"centent"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:200px; float:left; margin-right:20px;"</span><span class="tag">></span><span> </span></span></span></li> <li> <span></span><span class="tag"><span class="tag-name">select</span><span> </span><span class="attribute">multiple</span><span>=</span><span class="attribute-value">"multiple"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"select1"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:150px; height:160px;"</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">option</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"1"</span><span class="tag">></span><span>选项1</span><span class="tag"></span><span class="tag-name">option</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">option</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"2"</span><span class="tag">></span><span>选项2</span><span class="tag"></span><span class="tag-name">option</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">option</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"3"</span><span class="tag">></span><span>选项3</span><span class="tag"></span><span class="tag-name">option</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">option</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"4"</span><span class="tag">></span><span>选项4</span><span class="tag"></span><span class="tag-name">option</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">option</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"5"</span><span class="tag">></span><span>选项5</span><span class="tag"></span><span class="tag-name">option</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"></span><span class="tag-name">select</span><span class="tag">></span><span> </span> </li> <li class="alt"><span> </span></li> <li> <span></span><span class="tag"><span class="tag-name">div</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"add"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:block; width:140px; cursor:pointer;"</span><span class="tag">></span><span>选中添加到右边</span><span class="tag">></span><span class="tag">></span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"addAll"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:block; width:140px; cursor:pointer;"</span><span class="tag">></span><span>全部添加到右边</span><span class="tag">></span><span class="tag">></span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span> </li> <li> <span></span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"centent"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:200px; float:left; margin-right:20px;"</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">select</span><span> </span><span class="attribute">multiple</span><span>=</span><span class="attribute-value">"multiple"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"select2"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:150px; height:160px;"</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"></span><span class="tag-name">select</span><span class="tag">></span><span> </span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">div</span><span class="tag">></span><span> </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"add1"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:block; width:140px; cursor:pointer;"</span><span class="tag">></span><span class="tag"><span class="tag"><span>选中删除到左边</span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span> </span></span></span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"addAll1"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:block; width:170px; cursor:pointer;"</span><span class="tag">></span><span class="tag"><span class="tag"><span>全部选中删除到左边</span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span> </span></span></span></span> </li> <li> <span></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span> </li> <li class="alt"> <span></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span> </li> </ol> </div> </div> <div class="codeText"> <div class="codeHead"> <span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_9753')">复制内容到剪贴板</span> </div> <div id="code_9753"> <ol class="dp-c"> <li class="alt"><span><span><script><span class="string">"text/javascript"</script></span><span>> </span></span></li> <li><span> </span></li> <li class="alt"> <span></span><span class="comment">//下拉框多选的应用 9:57 </span><span> </span> </li> <li> <span>$(</span><span class="keyword">function</span><span>(){ </span> </li> <li class="alt"> <span></span><span class="comment">//开始把左边的添加到右边 </span><span> </span> </li> <li> <span>$(</span><span class="string">"#add"</span><span>).click(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//把选中的添加到右边 </span><span> </span> </li> <li class="alt"> <span>$option = $(</span><span class="string">"#select1 option:selected"</span><span>); </span> </li> <li> <span>$option.appendTo(</span><span class="string">"#select2"</span><span>); </span> </li> <li class="alt"><span>}) </span></li> <li> <span>$(</span><span class="string">"#addAll"</span><span>).click(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//全部添加到右边 </span><span> </span> </li> <li class="alt"> <span>$option = $(</span><span class="string">"#select1 option"</span><span>); </span> </li> <li> <span>$option.appendTo(</span><span class="string">"#select2"</span><span>); </span> </li> <li class="alt"><span>}) </span></li> <li> <span>$(</span><span class="string">"#select1"</span><span>).dbclick(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//双击添加到右边 </span><span> </span> </li> <li class="alt"> <span>$option = $(</span><span class="string">"#select1 option:selected"</span><span>,</span><span class="keyword">this</span><span>); </span> </li> <li> <span>$option.appendTo(</span><span class="string">"#select2"</span><span>); </span> </li> <li class="alt"><span>}) </span></li> <li> <span></span><span class="comment">//开始右边的添加到左边 </span><span> </span> </li> <li class="alt"> <span>$(</span><span class="string">"#add1"</span><span>).click(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//把选中的添加到左边 </span><span> </span> </li> <li> <span>$option = $(</span><span class="string">"#select2 option:selected"</span><span>); </span> </li> <li class="alt"> <span>$option.appendTo(</span><span class="string">"#select1"</span><span>); </span> </li> <li><span>}) </span></li> <li class="alt"> <span>$(</span><span class="string">"#addAll1"</span><span>).click(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//全部添加到左边 </span><span> </span> </li> <li> <span>$option = $(</span><span class="string">"#select2 option"</span><span>); </span> </li> <li class="alt"> <span>$option.appendTo(</span><span class="string">"#select1"</span><span>); </span> </li> <li><span>}) </span></li> <li class="alt"> <span>$(</span><span class="string">"#select2"</span><span>).dbclick(</span><span class="keyword">function</span><span>(){ </span><span class="comment">//双击添加到左边 </span><span> </span> </li> <li> <span>$option = $(</span><span class="string">"option:selected"</span><span>,</span><span class="keyword">this</span><span>); </span> </li> <li class="alt"> <span>$option.appendTo(</span><span class="string">"#select1"</span><span>); </span> </li> <li><span>}) </span></li> <li class="alt"><span>}) </span></li> <li><span></span></li> </ol> </div> </div>