3つのカスケードドロップダウンメニューを置き換えるにはどうすればよいですか？
ユーザーがカテゴリと場所を選択する必要がある大きなフォームがあり、それぞれに3つのレベルがあり、ユーザーは2番目と3番目のオプションを有効にする最初のオプションを選択する必要があります。各ドロップダウンには、少なくとも5つのオプションがあります。
デスクトップWebとAndroid=タブレットの両方でこの状況が発生しています。このプロセスを簡略化するために、この種の選択を改善する方法を見つけたいと思います。
EDIT 27/6/18
私はセレクタとしてマルチレベルメニューのようなものを使用するというこの考えを持っています。私はステップを追加していることを知っていますが、使いやすく理解しやすくなっています。
https://xd.Adobe.com/view/eb623b6b-3011-4578-56c0-e0944fce52b7-9d53/
これらが互いに完全に依存している場合、おそらく最初に選択されていないカテゴリを自動的に展開し、ユーザーがクリックする必要がないように、スクロールしてアイテムを選択します。
選択後1、その要素は、現在デザインにあるように単一の選択メニューに折りたたむことができます。ユーザーがエラーを修正する必要がある場合、折りたたまれた選択メニューは引き続き変更できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
1：特定の相互作用と実装の詳細：ここで提案する拡張の方法は、<select>要素のsize属性を変更することです。先行するselectアイテムがぼやけるまで、未入力のselect要素を無効にすることをお勧めします。このようにして、ユーザーが要素を操作しているときに要素が折りたたまれることに気を取られません。ぼかしでsize属性を切り替えると、フォーム要素がDOM内で順序どおりに保持され、プレゼンテーションにのみ影響するため、キーボードでのナビゲーションは期待どおりに機能するはずです。たとえば、ユーザーは最初のselect項目をクリックまたはタブで移動して選択を行い、タブで移動するか次のフィールドをクリックすると、最初の項目が折りたたまれ、2番目の項目が展開されます。モバイルデバイスでの動作をテストする必要があります。
あなたがコメントで述べたように、あなたが高さを持っていない場合。ページの上部にパンくずを置くことができます。最初の選択を選択したら、それを上部のパンくずに移動して選択を非表示にし、次に2番目の選択を表示します。それが選択されたら、パンくずリストに値を入力して、3番目を表示します。ブレッドクラムの2番目または最初のステップをクリックすると、選択ボックスが再表示されます。
これの利点は、現在の選択ボックスにフォーカスがあり、一度に1つの選択ボックスだけになることです。また、不動産を節約し、ユーザーが選択したものをシンプルかつ一般的に使用される方法で確認できます。
私が目にする唯一の問題は、モバイルを使用していて、選択した値が長い場合、パンくずリストがラップし始めることです。
ここで考えている完全な青空...それがどのようにコード化されるかさえわからないが...
Autodesk Revitを見たことがありますか？彼らはこの軌道制御を持っています。
コンパスのような写真を想像してみてください。その上に親指/マウスを置き、特定の方向にスライド操作してそのカテゴリを選択します。次に、「クリック」して次のレベルに進みます。次の選択を行います。 「クリック」します。そしてまた。
理論的には、10/20/100を選択できます。
選択すると、パンくずリストにアイテムが追加されます。
ただし、どのように取り消すかはわかりません。