0

2 つのリストのドロップダウン セレクターで問題が発生しています。以前は select-options で配置しようとしましたが、オプションを動的に非表示にしようとしたときに大きな問題が発生しました。

ul-li を使用するもう 1 つの利点は、クロスブラウザー フレンドリーで簡単にスタイルを設定できることです (他のスタック オーバーフローの質問から理解できるように)。

私が見つけた他のソリューションはすべて、2 番目のリストを作成するために AJAX などの何らかの形式の読み込みを必要としますが、それはここではオプションではないため、リスト全体が事前に読み込まれます。クラスやその他の属性を追加/削除できます。

<ul>
    <li>Volvo</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Ford</li>
    <li>Jeep</li>
</ul>

<ul>
    <li>[Choose Brand first]</li> <!-- visible if nothing chosen in 1st -->
    <li>[Choose model]</li> <!-- visible for all brands -->
    <li class="volvo">S80</li>
    <li class="volvo">V70</li>
    <li class="volvo">XC90</li>
    <li class="audi">A8</li>
    <li class="audi">A6</li>
    <li class="audi">A4</li>
    <li class="bmw">X1</li>
    <li class="bmw">M6</li>
    <li class="ford">fiesta</li>
    <li class="ford">Fiesta</li>
    <li class="ford">Mustang</li>
    <li class="ford">Explorer</li>
    <li class="jeep">Wrangler</li>
    <li class="jeep">Cherokee</li>  
</ul>

私が欲しいのは：

  1. 2 つのリストが 2 つのドロップダウン リスト (選択オプション) と同様に動作するようにします。単一のリストに対していくつかの解決策を試しましたが、同じページで 2 つのリストを使用している場合、適切に機能させることはできませんでした.. (例: http://jsfiddle.net/a6NJk/202/ )
  2. 最初の list-option に基づいて表示される特定のクラスを持つ 2 番目のリストのオプションのみ

例えば：

  • 最初のリストで何も選択しない場合、2 番目のリストに車種は表示されません。
  • 最初のリストで「ボルボ」を選択すると、ボルボ クラスの車種のみが 2 番目のリストに表示されます。

都合がよければ、jsfiddle ソリューションに非常に役立ちます。

事前に感謝

4

1 に答える 1