Djangoで連動するセレクタを作る
Djangoで連動するセレクタを作ってみました。 下記の３点を組み合わせます。
- セレクタの変更をトリガーとするイベントをjavascriptで作成
- javascriptの実行のため、セレクタの子要素
optionに属性を追加
連動するセレクタとは？
下のような感じで、ParentのSelectでAを選択したときはChildはAの子となる要素のみ選択でき、
ParentでBを選択したときはChildはBの子要素のみ選択できる
こういうタイプのセレクタです。
モデルを作成
今回は単純にParents, Childrenというモデルにしています。
models.py
フォームを作成
Select ウィジェットを継承したChildSelectクラスを作成。
ChildSelectが作成するoption要素にparent_id属性を追加し,親のidを設定します。
ちなみに、forms内でchoicesを設定していますが、単純に設定するとデータが変わってもサーバーがリロードされるまでセレクタの内容が変わりません。
コレを防ぐため、lambdaで関数オブジェクトとしています。
forms.py
テンプレートを作成
javascriptで、SelectFormクラスが生成するSelectタグ内の内容を変更します。
動きとしては下記のようになります。 ・Parentセレクタの変更をイベントのトリガーと設定 ・選択しているParentのIDと違うChildのoptionを削除
template.html
参考サイト
下記の記事のJQueryコードを元にJavascriptコードを作成しました。 try-m.co.jp
optionに属性を追加する方法は書きを参考にしました。 qiita.com
