Javascript的較少依賴下拉菜單

Question

在我的應用程序要求用戶輸入：

• 州 - >市
• 分類 - >子類別

City取決於State和Sub-Category取決於Category。 我希望它先不使用JavaScript，然後添加一個不顯眼的JavaScript以改善用戶體驗。

你將如何實現它？一次詢問所有獨立的領域？用多個步驟創建多步驟表單？任何其他可能性？

Answer 1

沒有JS，這可能會讓人厭煩。你會：

1. 選擇的狀態
2. 點擊「下一步」
3. 服務器接收你選擇什麼樣的狀態，並呈現一個新的頁面下拉充分的相關引用
4. 選擇一個城市
5. 單擊下一步
6. 有事

但與JS用戶體驗becom ES：

1. 選擇的狀態
2. 城市下拉出現
3. 選擇一個城市
4. 有事

沒有JS每次你想改變你的頁面必須在服務器渲染你是一個新的國家。而對於這樣的任務，這只是有點糟糕。

Answer 2

爲了使沒有JavaScript的工作，你需要像一個過程：

• 選擇狀態。
• 按下一個按鈕，將表單發佈到服務器。
• 返回一個包含所選州和城市的頁面供您選擇。
• 按下一個按鈕，將表單發送到服務器。

沒有腳本瀏覽器根據你在第一步選擇什麼不能做任何事情，所以你必須在服務器端做到這一點。

Answer 3

嘗試使用<optgroup>

<select name="cities"> 
    <optgroup label="State_one"> 
    <option value="City_one">City one</option> 
    <option value="City_two">City two</option> 
    </optgroup> 
    <optgroup label="State_two"> 
    <option value="City_three">City three</option> 
    <option value="City_four">City four</option> 
    </optgroup> 
</select> 

如果你想兩個並列的選擇方面，你可以做的:active僞類的一些CSS兩輪牛車。