如何逐步增強國家和州選擇領域？

如果我有兩個選擇字段，國家和狀態，然後我會像這樣的代碼吧：

<select name="country"> 
    <option>USA</option> 
    <option>France</option> 
</select> 

<select name="state"> 
    <option></option> 
</select>

我然後將根據國家的選擇使用AJAX填充狀態字段。

但是，這是逐漸增強的狀態。如何在沒有使用Javascript的情況下完成？如何增強它（如果前面的例子不是最好的方法）？

來源

2012-04-05 zgosalvez

是什麼例子。您剛剛發佈了兩個選擇。 _state_包含哪些法國？你有美國的靜態狀態列表嗎？什麼逐漸增強意味着什麼？你是什麼意思「沒有JavaScript」 - CSS？ http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.htm – mplungjan 2012-04-05 12:04:10

你必須使用JavaScript。它被稱爲multicomboboxes – jacktheripper 2012-04-05 12:10:00

這是一個非常簡單的CSS3版本，基於我給的鏈接http://jsfiddle.net/mplungjan/c9M45/ – mplungjan 2012-04-05 12:13:47

我的建議是在國家下面/下面有一個提交按鈕。提交時，服務器將填充所選國家的狀態並將響應發回。

現在，在你的頁面上的JavaScript負載隱藏這個按鈕，並附加在國家下拉的變更處理程序，並進行AJAX調用，這將返回狀態。

所以，如果javascript被禁用，按鈕將執行狀態檢索。如果啓用AJAX調用會做同樣的事情。

來源

2012-04-05 12:25:12 Ramesh

與Bergi的答案（即使用optgroups）相比，這種方法的優點是什麼？ – zgosalvez 2012-04-05 12:28:16

@zejesago您最終不會選擇帶有10000個'option'元素的'select'。 – robertc 2012-04-05 12:32:32

@robertc好點。也許我只是懶惰地爲沒有JS的少數用戶做額外的編碼。哈哈。 – zgosalvez 2012-04-05 12:39:54

一個解決方案可能是將兩個選擇結合在一起。像

<select name="countryAndState"> 
    <option>USA - Alabama</option> 
    <option>USA - Alaska</option> 
    ... 
    <option>France - Alsace</option> 
    <option>France - Aquitaine</option> 
</select>

或更好

<select name="countryAndState"> 
    <optgroup label="USA"> 
     <option>Alabama</option> 
     ... 
    </optgroup> 
    <optgroup label="France"> 
     <option>Alsace</option> 
     ... 
    </optgroup> 
</select>

當然，至少在第二個表，您必須確保該選項value s爲唯一的。 optgroup element是按樹形順序對select選項進行分組的建議方法。這意味着，您的增強型JavaScript也將能夠從DOM中提取樹結構。

另一種解決方案是填充狀態字段服務器端，即將表單分爲兩步，首先選擇國家，然後選擇狀態。這可以通過cookie或其他方式來保存選定的國家;並且只要country的提交值與保存的值不同，就需要輸出新的（未選中的）狀態select元素。

來源

2012-04-05 12:19:36 Bergi

偉大的修改提示。我會記住這一點。謝謝。 – zgosalvez 2012-04-05 12:48:20

是的，我認爲optgroup對於服務器端解決方案來說更可取，因爲您可以使用它來填充JS結構。 – Bergi 2012-04-05 12:51:19

如何逐步增強國家和州選擇領域？

回答

相關問題