我可以設計一個<select>元素來顯示列嗎？

我試圖創建一個<選擇>元素中基於列的列表中選擇多個=多 - 想什麼，我在菜單中看到的是：我可以設計一個<select>元素來顯示列嗎？

Opt1 Opt5 Opt9 
Opt2 Opt6 Opt10 
Opt3 Opt7 Opt11 
Opt4 Opt8 Opt12

這可能嗎？我當然願意在jQuery中這樣做，但更喜歡CSS。

來源

2012-01-31 kolys

這不可能使用本地HTML'select'元素。但是，可以使用'div'重新創建您的示例，在點擊控制輸入時顯示/隱藏該div。您可能會遇到使用此方法的可訪問性問題 - 如果這對您很重要。 – 2012-01-31 15:52:42

@RoryMcCrossan你應該做出這個答案;僅僅因爲答案是「否」並不意味着它是無效的。 :) – Phrogz 2012-01-31 15:59:35

您可以使用jQuery做任何事情，構建自定義表單元素，這些元素的外觀和排序類似於本機窗口小部件。我個人建議不要這樣做，因爲最終用戶體驗的改變和功能的喪失通常不值得堅持您的自定義UI需求。 – Phrogz 2012-01-31 16:23:48

這是絕對可能的。

在this similar SO question中有幾個建議選項。

而this very popular question需要更多一點，添加自動完成功能。

如果你谷歌「jquery multi-column dropdownlist」，你可以找到更多的選擇。

順便說一句，「multiple」屬性指定用戶是否可以在列表中選擇多個項目，而不是在下拉列表中顯示多個列。

來源

2012-01-31 16:01:55 DOK

如果仔細觀察，「類似問題」有點不同。 OP喜歡有三列選項，而不是同一選項中的三列。 – PiTheNumber 2012-01-31 16:09:37

@PiTheNumber，這就是爲什麼我說它是相似的，我沒有說這是一個重複。儘管問題並不完全相同，但其中的一些答案在這裏會非常有幫助。而且，通過最流行的答案來看，這種情況也可能有所幫助。這就是爲什麼我在這裏提供這個信息，在我的答案。 – DOK 2012-01-31 16:12:03

我不認爲這是可能的CSS。

但是，您可以製作三個選擇並使用JavaScript來確保只選擇了其中的一個。

下面是一個簡單的例子，如何用jQuery做到這一點：

$('.columnselect').click(function() 
{ 
    var id = $(this).attr('id'); 
    $('.columnselect:not([id="' + id + '"]) option:selected').attr('selected', false); 
})

見http://jsfiddle.net/eJmgz/

如果你喜歡多隻選擇刪除的JavaScript代碼。

來源

2012-01-31 15:51:59 PiTheNumber

您只需單擊並拖動任意/所有列，即可在每列中選擇一個選項。 http://i.imgur.com/gAB8v。jpg – MetalFrog 2012-01-31 16:15:31

這就是爲什麼它是一個_simple_例子;）還有13種其他方式來操縱這個選擇。無論如何，您必須驗證應用中的數據。 – PiTheNumber 2012-01-31 16:18:45

否 - 您無法使用CSS設計選擇下拉菜單（Google Chrome有一些例外），因爲它們是操作系統的一部分，而不是瀏覽器。

然而，您可以使用JavaScript（這裏有幾個非常好的jQuery插件，因爲這一個：uniformjs），您實質上隱藏了原始選擇下拉列表，並將其替換爲< li> --list或其他元素你的選擇 - 你可以風格。

來源

2012-01-31 16:06:04 Marcus

的jQuery gentleSelect plugin做你正在尋找什麼:-) http://shawnchin.github.com/jquery-gentleSelect/

這使得它很容易使多列/行選擇和多選元素，讓你在佈局和設計的完全控制。比嘗試在CSS中執行此操作要容易得多;-)

來源

2013-02-25 02:02:11

我可以設計一個<select>元素來顯示列嗎？

回答

相關問題