select不支持雙擊dbclick事件
編輯：HTML和Xhtml
XML/HTML Code復制內容到剪貼板
- <div class="centent" style="width:200px; float:left; margin-right:20px;">
- <select multiple="multiple" id="select1" style="width:150px; height:160px;">
- <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>
- </select>
-
- <div>
- <span id="add" style="display:block; width:140px; cursor:pointer;">選中添加到右邊>></span>
- <span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右邊>></span>
- </div></div>
- <div class="centent" style="width:200px; float:left; margin-right:20px;">
- <select multiple="multiple" id="select2" style="width:150px; height:160px;">
- </select>
- <div>
- <span id="add1" style="display:block; width:140px; cursor:pointer;"><<選中刪除到左邊</span>
- <span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部選中刪除到左邊</span>
- </div>
- </div>
JavaScript Code復制內容到剪貼板
- <script type="text/javascript">
-
- //下拉框多選的應用 9：57
- $(function(){
- //開始把左邊的添加到右邊
- $("#add").click(function(){ //把選中的添加到右邊
- $option = $("#select1 option:selected");
- $option.appendTo("#select2");
- })
- $("#addAll").click(function(){ //全部添加到右邊
- $option = $("#select1 option");
- $option.appendTo("#select2");
- })
- $("#select1").dbclick(function(){ //雙擊添加到右邊
- $option = $("#select1 option:selected",this);
- $option.appendTo("#select2");
- })
- //開始右邊的添加到左邊
- $("#add1").click(function(){ //把選中的添加到左邊
- $option = $("#select2 option:selected");
- $option.appendTo("#select1");
- })
- $("#addAll1").click(function(){ //全部添加到左邊
- $option = $("#select2 option");
- $option.appendTo("#select1");
- })
- $("#select2").dbclick(function(){ //雙擊添加到左邊
- $option = $("option:selected",this);
- $option.appendTo("#select1");
- })
- })
- </script>