將下拉轉換爲無線電或只使用JavaScript/jQuery來改變選擇？

我最近設法通過動態輸出來自php的一些數據並使用jquery禁用下拉菜單中的某些選項（取決於我的電子商務網站的庫存數量）來使下拉選擇正常工作。將下拉轉換爲無線電或只使用JavaScript/jQuery來改變選擇？

下面是代碼：http://jsbin.com/osipe5/2/edit

現在的問題是，我想有顯示爲單選按鈕選擇現在並最終使用CSS樣式它類似於像這樣：http://jsbin.com/uwuje（發表另一SO用戶）

所以我的問題是：我應該轉換下拉完全成鏈單選按鈕選擇或做這樣的事情：http://jsfiddle.net/yJTdF/（他人發佈SO用戶），其中單選按鈕的jQuery生成和隱藏下拉使用CSS？

我擔心可用性和跨瀏覽器問題。

任何輸入，非常感謝。

謝謝！

來源

2011-02-27 Adil

首先，您需要考慮將使用您的應用程序的人。對於連接速度慢的用戶來說，下拉列表會有些惱人，特別是您已經說過這是針對您的電子商務網站的。您的網站可能會以不同態度處理多個最終用戶。

下拉列表

項目被隱藏，直到用戶點擊下拉列表，並滾動的項目列表。如果我們要判斷用戶界面問題，這很重要。更多的客戶更喜歡點擊和點擊，而不是點擊和滾動。

按鈕

該項目已直接顯示到最終用戶，它僅僅是一個知道什麼點擊的問題。只需通過查看和分頁，最終用戶就會知道哪些項目可用，哪些項目更容易選擇。

跨瀏覽器問題

，可以隨時處理。有很多方法可以讓你的腳本在任何瀏覽器上工作。與瀏覽器兼容性相比，您可能會花更多時間處理css問題，而不是javascript問題。到目前爲止，javascipts的常見問題是客戶端禁用JavaScripts以在其瀏覽器上運行。您可以決定使用服務器端控件來確保。

來源

2011-03-24 11:11:40

能否請您幫忙解決這個問題http://stackoverflow.com/questions/36595547/convert-dropdown-to-selection-boxes-with-color – Manik 2016-04-13 13:50:48

我不建議信任用戶啓用JavaScript，所以「生成單選按鈕使用jQuery」選項已經結束。我會使用與您發佈的第二個鏈接非常相似的東西（完全生成兩個單選按鈕組的html），但只能使用js來禁用在選擇大小選項時需要禁用的顏色選項。另外，在服務器端，您需要再次執行這些檢查，並可能輸出錯誤頁面，但是某些內容不可用。這樣，只使用標準的html（即無線電輸入）和css來製作漂亮的東西（js用於做一些花哨的東西）（關鍵在於如果用戶沒有開啓js，他們仍然可以使用你的站點），你可以有一個可用的跨瀏覽器解決方案。

來源

2011-03-19 03:50:28 cambraca

如果在最終產品中，您希望它的行爲與第二個jsbin鏈接相同，那麼我會說單選按鈕更有意義。最後，與需要處理下拉菜單以及完成最終產品所需的所有操作相比，它的工作量要少得多。

在實現方面，您可以更改類並單擊禁用的單選按鈕上的屬性，以使它們不易於使用。而動態地將下拉信息更改爲單選按鈕UI ......聽起來很討厭。

來源

2011-03-19 03:50:55 dmcnelis

如果你住的progressive enhancement，您呈現的標記應該仍然是可用的（和語義有效），當一切都失敗了：

CSS禁用
禁用JavaScript
沒有圖像支持
低屏幕分辨率（例如移動設備）
無懸停事件（觸摸屏）

在這些情況下使用任何有意義的東西，並使用jQuery爲其他人制作皮條。下拉菜單可能會使您在移動設備上的可用性略有提高。

來源

2011-03-19 04:44:36

我覺得jQueryUI Button非常好，它可以幫助你很容易地設計你的按鈕。

它與actual radio buttons一起使用，所以如果將HTML標記爲正確並且不使用JS，它不會傷害任何人。

無論如何，如果你打算支持非JavaScript瀏覽器（你應該），你必須有一個服務器端驗證例程。

來源

2011-03-21 02:48:23 marcosfromero

將下拉轉換爲無線電或只使用JavaScript/jQuery來改變選擇？

回答

相關問題