標籤：function 連結 方法 ajax cti 左移 select on() 內容
雙下拉框要實現的效果，實際上就是左邊下拉選擇框裡的內容，可以添加到右邊，而右邊同理。寫了個簡單的例子，來說明一下.
代碼如下：
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 | <!DOCTYPEhtml><html><head><title>jquery之雙下拉框</title><styletype="text/css">.select1{ width:200px; min-height:150px;}.select2{ width:200px; min-height:150px; margin-left:20px;}.btn{ margin-top:20px; }</style></head><body><selectclass="select1"multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option></select><selectclass="select2"multiple="multiple"> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option></select><divclass="btn"> <buttonclass="btn_add">右移>></button> <buttonclass="btn_delete"><<左移</button></div><scriptsrc="js/jquery-1.11.1.min.js"></script><script>$(function(){ $(".btn_add").click(function(){ $(".select1 option:selected").appendTo(".select2"); }); $(".btn_delete").click(function(){ $(".select2 option:selected").appendTo(".select1"); });})</script></body></html> |
其實要實現這個功能，只需要用到appendTo()這個方法。它的用處就是在被選元素的結尾新增內容。
一般，下拉框都是單選，但是加上“multiple”這個屬性，就可以同時多選。
我們還可以結合ajax迴圈遍曆資料，來進行動態添加刪除。
本文永久地址：http://blogs.zmit.cn/5155.html
本文出自 中夢科技部落格 ，轉載時請註明出處及相應連結。
jQuery之雙下拉框
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
