web-dev-qa-db-ja.com

Django-複数選択のドロップダウンフォーム

Djangodropdownforms.Formフィールドを構築するためのガイダンスが必要です複数の選択肢。フォームのofficeフィールドで複数の場所を選択する必要があります。

送信時に、フォームは選択したオフィスのlistを返す必要があります(例:["New York", "Los Angeles"]または["Austin"])。 Tupleを返すことも可能です。


私が今できる最善のことは、次のようにofficeの-​​ multipleChoiceField をビルドすることです。

from Django import forms

class my_Form(forms.Form):

    OPTIONS = [
        ("0", "*ALL"),
        ("1", "New York"),
        ("2", "Los Angeles"),
        ]

    office = forms.MultipleChoiceField(
            choices=OPTIONS,
            initial='0',
            widget=forms.SelectMultiple(),
            required=True,
            label='Office',
        )

結果として、このフォームフィールドレイアウトが作成されます。

enter image description here


ただし、このフィールドをドロップダウンにして、ページのスペースを取らないようにします。

私はこれを見つけました djangosnippet しかし、(1)数人の人がそれが古くなっているようだと言っています(確認できません)、そして(2)最初に組み込みのDjangoフォーム/ウィジェットのセットアップは、カスタムコードを使用する前にこのタスクを実行できます。

6
NickBraunagel

「ドロップダウン」ボックスは、HTMLでの複数選択をサポートしていません。ブラウザは、画像が示すように常にフラットボックスとしてレンダリングします。

おそらく、ある種のJSウィジェットを使用したいと思うでしょう Select2 は人気のあるものです。いくつかのDjangoプロジェクト- Django-select2Django-easy-select -簡単に統合できるようにすることを目的としていますあなたの形に;私はそれらのどちらかでの経験がありません。

(はい、そのスニペットは-Djangoスニペットの多くのものと同様に-非常に古くなっています。「newforms」はバージョン1.0より前でも「forms」に名前が変更されました。)

8
Daniel Roseman

Django select2。以下のコードをそれぞれのHTMLファイルに含めます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select class="select_field_class" multiple="multiple" name="option" id="option">
      <option value="">Enter the option</option>
      {% for option in options %}
         <option value="{{ option.id }}">{{ option.name }}</option>
      {% endfor %}
</select>

$('.select_field_class').select2( { placeholder: "Select here", maximumSelectionSize: 100  } );
2
MicroPyramid

これは遅いですが、それが他の誰かを助けることを願っています。

また、Django formsとselect2ウィジェットSelect2MultipleWidgetを組み合わせて、見栄えを良くすることもできます。

class YourCreateForm(forms.ModelForm):
     CHOICES = (("address1","address1"), ("address2","address2"))
     address=forms.MultipleChoiceField(choices=CHOICES,widget=Select2MultipleWidget)

     class Meta:
         model = YourModel
         fields = ("field1","address",)

Django select2ウィジェットをインストールしてインポートすることを忘れないでください

2
Codebender

私が言ったように 同様の質問で 、1つの提案はPythonでBootstrapを使用することです。

forms.py

(...)
class yourForm(forms.Form):
    options = forms.MultipleChoiceField(
    choices=OPTIONS, widget=forms.CheckboxSelectMultiple(),
    label="myLabel", required=True, error_messages={'required': 'myRequiredMessage'})

view.py

def anything(...):
    (...)
    form = yourForm( )
    (...)
    return render(request, "myPage.html", {'form': form})

myPage.html

(...)
{% csrf_token %}
    {% for field in form %}
        <div class="col-md-12 dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{ field.label_tag }}
                <span class="caret"></span>
            </button>
            <div class="dropdown-menu">
                <div><a href="#">{{ field }}</a></div>
            </div>
        </div>
    {% endfor %}
(...)
0
Davidson Lima