項目の階層リストを含むコンボボックスを作成したいと考えています。親アイテムと子アイテムを個別に選択できるようにする必要があります。また、このコンボボックスに先行入力機能を提供できるようにする必要もあります。
たとえば、JS で次のデータを使用してコンボボックスを作成したいとします。
カナダ
- オンタリオ
--ケベック
アメリカ合衆国
-- マサチューセッツ州
--オハイオ州
――テキサス
このドロップダウンから、州/州を個別に選択できるようにしたいと考えています。また、子供を選択せずに「カナダ」を選択できるようにしたいと考えています。
私は Select2 を試し、それが可能かどうかを確認するために JQuery UI を掘り下げてきましたが、これまでのところ、必要な動作を実現することはできません。私はブートストラップを使用してこのページを書いていますが、ブーストトラップで指定された先行入力は、コンボボックスではまったく機能しないようです (私が見ることができます)。
これを実現するには、Chosen javascript プラグインを使用できます。 http://harvesthq.github.com/chosen/
先行入力の結果ごとにカスタム JS オブジェクトを保存して、単なる文字列 (型や ID など) 以外のものを表示および保存できるようにすることができます。それを使用すると、国と州/州で異なるロジックを持つことができます。これを行う例を次に示します。
https://github.com/twbs/bootstrap/pull/3682
そのため、アップデータ関数では、クリックされたのが親か子かを判断するカスタム オブジェクトに基づくロジックを持つことができます。
親を子とは異なるように見せる限り、私自身は使用していませんが、ブートストラップにはテンプレート システムがあります。例については、このリンクを確認してください。
https://github.com/twbs/bootstrap/issues/2441
これを使用して、親と子のルック アンド フィールを区別することができます。