jquery製作select清單雙向選擇範例程式碼

首頁

web前端

js教程

jquery製作select清單雙向選擇範例程式碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:37 PM

select 清單

jquery製作的select清單雙向選擇，相容性肯定是不錯的，需要的朋友可以學習下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 

<style> 
.sel{width:150px;height:200px;} 
.btn{width:50px;font-weight:bold;font-size:14px; } 
</style> 
</HEAD> 

<BODY> 
<table> 
<tr> 
<td> 
<select multiple class="sel" id="sel_left"> 
<option value="a">aaaaaaaaaaa</option> 
<option value="b">bbbbbbbbbbb</option> 
<option value="c">ccccccccccc</option> 
<option value="d">ddddddddddd</option> 
<option value="e">eeeeeeeeeee</option> 
</select> 
</td> 
<td> 
<p><button class="btn" id="btn_1">>> </button></p> 
<p><button class="btn" id="btn_2">></button></p> 
<p><button class="btn" id="btn_3"><</button></p> 
<p><button class="btn" id="btn_4"><<</button></p> 

</td> 
<td> 
<select multiple class="sel" id="sel_right"> 
<option value="f">fffffffffff</option> 
</select> 
</td> 
</tr> 
</table> 
</BODY> 
<script> 
$(function(){ 
$("#sel_left,#sel_right").bind("change",checkBtn); 
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn); 
checkBtn(); 
}); 

function checkBtn(){ 
jQuery("#sel_left>option").length > 0 &#63; jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled"); 
jQuery("#sel_left option:selected").length > 0 &#63; jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled"); 
jQuery("#sel_right option:selected").length > 0 &#63; jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled"); 
jQuery("#sel_right>option").length > 0 &#63; jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled"); 
} 

function clickBtn(e){ 
if("btn_1" == e.target.id){ 
jQuery("#sel_left>option").appendTo("#sel_right"); 
}else if("btn_2" == e.target.id){ 
jQuery("#sel_left option:selected").appendTo("#sel_right"); 
}else if("btn_3" == e.target.id){ 
jQuery("#sel_right option:selected").appendTo("#sel_left"); 
}else if("btn_4" == e.target.id){ 
jQuery("#sel_right>option").appendTo("#sel_left"); 
} 
checkBtn(); 
} 
</script> 
</HTML>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7747

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

如何使用Python從清單中刪除方括號 Sep 05, 2023 pm 07:05 PM

Python是一款非常有用的軟體，可以根據需要用於許多不同的目的。 Python可以用於Web開發、資料科學、機器學習等許多其他需要自動化處理的領域。它具有許多不同的功能，可以幫助我們執行這些任務。 Python列表是Python的一個非常有用的功能之一。顧名思義，清單包含您希望儲存的所有資料。它基本上是一組不同類型的信息。刪除方括號的不同方法許多時候，使用者會遇到清單項目顯示在方括號中的情況。在本文中，我們將詳細介紹如何去除這些括號，以便更好地查看您的清單。字串和替換函數刪除括號的最簡單方法之一是在

如何使用Python的count()函數計算清單中某個元素的數量 Nov 18, 2023 pm 02:53 PM

如何使用Python的count()函數計算清單中某個元素的數量，需要具體程式碼範例Python作為一種強大且易學的程式語言，提供了許多內建函數來處理不同的資料結構。其中之一就是count()函數，它可以用來計算清單中某個元素的數量。在本文中，我們將詳細介紹如何使用count()函數，並提供具體的程式碼範例。 count()函數是Python的內建函數，用來計算某

我們可以在Java列表中插入空值嗎？ Aug 20, 2023 pm 07:01 PM

SolutionYes,Wecaninsertnullvaluestoalisteasilyusingitsadd()method.IncaseofListimplementationdoesnotsupportnullthenitwillthrowNullPointerException.Syntaxbooleanadd(Ee)將指定的元素追加到此清單末尾的元素。類型參數E −元素的運行時類型。參數e −要追加到此列表的元

製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法 Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上製作GroceryList在「提醒事項」應用程式中建立GroceryList非常簡單。你只需添加一個列表，然後用你的項目填充它。該應用程式會自動將您的商品分類，您甚至可以與您的伴侶或扁平夥伴合作，列出您需要從商店購買的東西。以下是執行此操作的完整步驟：步驟1：開啟iCloud提醒事項聽起來很奇怪，蘋果表示您需要啟用來自iCloud的提醒才能在iOS17上建立GroceryList。以下是它的步驟：前往iPhone上的「設定」應用，然後點擊[您的姓名]。接下來，選擇i

建立雜貨清單的方法：使用 iPhone 的「提醒事項」App Dec 01, 2023 pm 03:37 PM

在iOS17中，Apple在提醒應用程式中添加了一個方便的小清單功能，以便在您外出購買雜貨時為您提供幫助。繼續閱讀以了解如何使用它並縮短您的商店之旅。當您使用新的「雜貨」清單類型（在美國以外名為「購物」）建立清單時，您可以輸入各種食品和雜物，並按類別自動組織它們。該組織使您在雜貨店或外出購物時更容易找到您需要的東西。提醒中可用的類別類型包括農產品、麵包和穀物、冷凍食品、零食和糖果、肉類、乳製品、雞蛋和奶酪、烘焙食品、烘焙食品、家居用品、個人護理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17創

Del和remove()在Python中的列表上有什麼區別？ Sep 12, 2023 pm 04:25 PM

在討論差異之前，讓我們先了解一下Python清單中的Del和Remove()是什麼。 Python清單中的Del關鍵字Python中的del關鍵字用於從List中刪除一個或多個元素。我們也可以刪除所有元素，即刪除整個清單。範例使用del關鍵字從Python清單中刪除元素#CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="

使用Python根據列表建立多個目錄 Sep 08, 2023 am 08:21 AM

Python憑藉其簡單性和多功能性，已成為各種應用程式中最受歡迎的程式語言之一。無論您是經驗豐富的開發人員還是剛開始編碼之旅，Python都提供了廣泛的功能和函式庫，使複雜的任務變得易於管理。在本文中，我們將探討一個實際場景，Python可以透過自動執行基於清單建立多個目錄的過程來幫助我們。透過利用Python內建模組和技術的強大功能，我們可以有效地處理此任務，而無需手動幹預。在本教程中，我們將深入研究創建多個目錄的問題，並為您提供使用Python解決該問題的不同方法。在本文結束時，我們的目標是為您

無法顯示win7無線網路列表 Dec 22, 2023 am 08:07 AM

為了方便很多人移動辦公，很多筆記本都帶有無線網的功能，但有些人的電腦上無法顯示WiFi列表，現在就給大家帶來win7系統下遇到這種問題的處理方法，一起來看一下吧。 win7無線網路清單顯示不出來1、右鍵你電腦右下角的網路圖標，選擇“開啟網路和共用中心”，開啟後再點擊左邊的「變更轉接器設定」2、開啟後滑鼠右鍵選擇無線網路轉接器，選擇「診斷」3、等待診斷，如果系統診斷出問題就修復它。 4.修復完成之後，就可以看到WiFi清單了。

See all articles

jquery製作select清單雙向選擇範例程式碼_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題