<select>其值依賴於另一個<select>

我可以想出一個方法來做到這一點，但我不知道它是否唯一的方法。<select>其值依賴於另一個<select>

在我網站上的一個頁面上，我有兩個選擇框，一個「父」選擇框和一個「子」選擇框。「子」選擇框內的值取決於在「父」選擇框中選擇的內容。通過AJAX調用，這很容易在JavaScript中解決，但是我嘗試構建我的網站時，它們在JavaScript關閉時會優雅地退化。

我可以考慮接觸非js用戶的這種情況的唯一方法是有一個表單按鈕，它將重新加載PHP頁面並將一個變量附加到URL中，然後PHP將檢測到這一點併發送值給'孩子'選擇。然而，這是一個可用性問題和海事組織，這是一種醜陋的方式來解決這個問題。

有沒有其他辦法可以做到這一點？這些值不一定需要在選擇框中。

來源

2009-08-19 Zim

不幸的是，如果您想將表單全部保留在一個頁面上，沒有腳本的方法並不是一個好方法 - 您使用按鈕的想法可能是您可以獲得的最佳方法。

另一種選擇是將表單轉換爲多步驟過程，在這個過程中，他們在一個頁面上選擇父項目，然後移動到具有子選擇的過程中的下一個頁面 - 實質上，一種嚮導式的方法。

來源

2009-08-19 11:04:30 Amber

在JavaScript禁用的情況下，您別無選擇，只能等待用戶提交回服務器。

如果您的父級選擇中的值足夠小，那麼您可能可以避開爲每個值選擇一個值，這將繞過更新內容的需要。

老實說，我不會打擾：統計數據顯示1％或更少的用戶禁用Javascript。越來越多的人使用Safari和Opera，很多人甚至都懶得在這些瀏覽器上測試他們的網站。

無論是或者你必須選擇一個不同的UI元素，將會更優雅地退化。

最後，值得指出的是，如果一個網站做的很好，你可以在300ms以內完成頁面刷新，在這點上沒有太多的成本（就用戶體驗而言）返回服務器。

來源

2009-08-19 11:05:44 cletus

您從哪裏找到該統計信息？我認爲這大概在百分之五左右。也許我只是想在這裏成爲一名完美主義者。 – Zim 2009-08-19 11:10:06

http://stackoverflow.com/questions/121108/how-many-people-disable-javascript但問題是很難真正量化。移動瀏覽器將這個數字推倒，這取決於您的網站的受衆羣體。 – cletus 2009-08-19 11:16:07

除非字面上有數千個可能的選項，否則您不應該需要AJAX。您可以簡單地將所有可能的值加載到第二個選擇中（爲了便於閱讀，使用選項組），並且在選擇父項後使用JS進行篩選。你也想用JS禁用第二個盒子，所以用戶總是先選擇一個父節點。

來源

2009-08-19 11:09:10 DisgruntledGoat

使用OPTGROUP s可以在禁用JavaScript的情況下（假設沒有太多的選項）可以幫助JavaScript過濾和可用性。

對於第二SELECT：

<select> 
    <optgroup name="colors" label="Colors"> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
    </optgroup> 
    <optgroup name="sizes" label="Sizes"> 
    <option value="small">Small</option> 
    <option value="medium">Medium</option> 
    <option value="large">Large</option> 
    </optgroup> 
</select>

記住，服務器端代碼需要驗證選項，即使啓用JavaScript。

來源

2009-08-19 11:18:17

<select>其值依賴於另一個<select>

回答

相關問題