10,000 の可能な値を含むドロップダウンと順序が重要なドロップダウン vs.優雅な劣化

StackOverflow https://stackoverflow.com/questions/2239865

質問

背景

このフォームでは、JavaScript のみを使用して、~5,000 のエントリ (サプライヤー) を検索し、そこから選択したドロップダウン (工場、~10,000 のエントリ) を入力します。現時点では、JavaScript が必要なフォームです。JavaScript エラーによってフォームが使用不能にならないようにしたいのですが、エントリの数とエントリの連続的な性質を考えると、基本的な HTML バージョンだけを提供する慣用的な方法がありません。

問題

連続/階層ドロップダウン

順序が重要なドロップダウンの例:http://www.javascriptkit.com/javatutors/selectcontent2.shtml

これは、連続/階層ドロップダウン コンテンツの「フィルタリング」を示しています。2 番目の都市ドロップダウンでの選択は、最初の国ドロップダウンでの選択に基づいてフィルタリングされます。しかし、JavaScript を削除すると、すぐに混乱してしまう可能性があります。アメリカのマドリード？フランスのベルリン？シーケンスが壊れてしまいます。

膨大な数のオプションがあるドロップダウン

10,000 個の可能なオプションを含む選択ドロップダウンがある場合、JavaScript を使用してそれらをフィルタリング/検索するのは非常に簡単です。一方、JavaScript を使用せずにこれらのオプションを扱うのははるかに困難です。

すべてのオプションを読み込むだけでブラウザがパンクしてしまう場合、ユーザーにすべての可能性を提供するにはどうすればよいでしょうか?

可能な解決策

連続/階層選択ボックス:

  • サーバー側の 2 部構成のフォーム。
  • ?オプショングループを選択しますか?
  • ???

膨大な数のオプションを使用して選択します。

  • サーバー側の 2 つの部分からなる検索フォーム。
  • サーバー側のテキスト検索でエントリ名を照合します。
  • ???

リソース豊富なソリューションへのシンプルなリンクは大歓迎です。

役に立ちましたか？

解決

私は考えることができる唯一の解決策は、あなたの結果を絞り込むために必要があるたびに提出フォームを使用することです。あなたは、供給者の国を選択するページを表示することから始め。これは、提出、およびテキストとして選択した国を示してページを返し、現在の都市のように、次のフィールドを選択するためのドロップダウンがあります。そのように、のサーバーの各レベルでフィルタリングを行うことができます。

ここではJSPの例です。

<c:choose>
    <c:when test="${empty country}">
        Country: 
        <form>
            <select>
                <option value="USA">America</option>
                <option value="DEU">Germany</option>
                <%-- ... --%>
            </select>
        </form>
    </c:when>
    <c:otherwise>
        Country: ${country} 
        <c:choose>
            <c:when test="${empty city}">
                <input type="submit" value="Change" />   <%-- Button to change the previous value --%>

                <%-- your form for choosing a supplier's city --%>                    
            </c:when>
            <c:otherwise>
                <%-- continue filtering until you have all of the data --%>
            </c:otherwise>
        </c:choose>

    </c:otherwise>
<c:choose>
あなたは国を選択すると、

、フォームを送信します。サーバーには、国を処理し、countryフィールドの値とあなたの隣のドロップダウンのための可能な都市のリストと同じページを返します。このようにそれを行うことは、あなたがデータを順次フィルタリングするだけで（というよりもJavaScriptの）フォームの提出に依存することができます。お使いのサーバがどのくらい離れているか、ユーザーに沿ってのトラックを維持するための責任を負うことになります。このソリューションの明白な没落は、あなたのJSPは、ネストされた<c:choose>ブロックのすべてと、かなり厄介になることである。

あなたのJavaScriptが読み込まれているかどうかを確認、ページのロード：あなたはまた、ハイブリッドソリューションを試してみてください。その場合は、オプションの次のセットを移入するその背後にAJAXを持っているプレーンなHTMLを使用して提出フォームを交換してください。そうすれば、あなたのページではJavaScriptをするとき、のないのロード時間の束をリフレッシュする必要はありませんが、JavaScriptののんではないの負荷場合、まだ機能するようになります。ただ、考えています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top