2

私は主にユーザビリティの問題を抱えています。

考古学的発見の階層カテゴリ (200 以上) の長いリストがあります。ユーザーが調査結果を投稿するとき、このリストから 1 つのカテゴリを選択する必要があります。

  • 青銅器時代
    • 家庭用品
    • ジュエリー
    • 軍隊
      • スピアーズ
    • ...
  • 中世
    • ジュエリー
    • 宗教的工芸品
    • ...
  • 第二次世界大戦
    • ドイツ
      • 軍隊
        • バッジ
          • 歩兵
  • ...

リストは情報の欠落なしに切り取り/分割することはできないので、このままにしておきたい。

もっと使いやすくするには？一般的な 2 つの使用例は次のとおりです。

  1. レベルごとの選択レベル(最初にブロンズ エイジか、ミドル エイジか、... ジュエリーか、ミリタリーか、... スピアーズか...)
  2. 検索(ユーザーはそれがネックレスであることは知っているが、中世初期か後期かはわからないなど)

それら2つをどのように組み合わせるのですか？既存のソリューションはありますか?

ありがとう！

4

2 に答える 2

1

これが役立つ場合、最初のユースケースを整理するために、HTML で次のようにすることができます。

Age: 
<select name='age' id='age' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Bronze Age</option>
     <option value='1'>Middle Age</option>
     ...
</select>

<select name='BronzeAge' id='BronzeAge' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Household tools</option>
     <option value='1'>Jewelry</option>
     ...
</select>

<select name='MiddleAge' id='MiddleAge' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Jewlery</option>
     <option value='1'>Religious artifacts</option>
     ...
</select>

...

<script language='JavaScript'>
showRelevantRuleDropdown(document.getElementById('age'),1);
</script>

以下の Javascript を使用します。

function showRelevantRuleDropdown(elem, restore) {
    // Show one SELECT element (elem) between Option 1 or Option 2
    // If the parameter restore is 1, the hidden element is restored to its default value
    if (elem.selectedIndex == 0) {
        document.getElementById('BronzeAge').style.display = 'none';
        document.getElementById('MiddleAge').style.display = 'inline';
        if (restore == 1) {
            document.getElementById('BronzeAge').getElementsByTagName('option')['0'].selected = 'selected';
        }
    }
    else {
        document.getElementById('MiddleAge').style.display = 'none';
        document.getElementById('BronzeAge').style.display = 'inline';
        if (restore == 1) {
            document.getElementById('MiddleAge').getElementsByTagName('option')['0'].selected = 'selected';
        }
    }
}

これは 1 レベルの深さで機能しますが、簡単に拡張できます。

使用したい場合は、codepen にコードがあります: http://codepen.io/ophintor/pen/FaHbh

于 2013-03-22T16:08:51.720 に答える