2016-09-19 89 views
2

我需要指导,建立一个Django 下拉forms.Form领域中,我可以选择多个选择。我需要在窗体的office字段中选择多个位置。Django的 - 下拉形式多选择

提交时,表格需要返回所选办公室的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


但是,我希望这个领域是博士opdown,在页面上占用更少的空间。我发现这个djangosnippet,但(1)有几个人提到它看起来过时(我不能确认),和(2)我首先要检查一个内置的Django窗体/小部件设置是否可以在使用自定义代码之前完成此任务。

回答

2

“Dropdown”框不支持HTML中的多项选择;浏览器将始终将其呈现为一个扁平框,如图像所示。

你可能想使用某种JS小部件 - Select2是一个受欢迎的。有几个Django项目 - django-select2,django-easy-select - 旨在使它易于整合到您的表单;我没有任何经验。

(是的,这片段 - 像许多事情上Djangosnippets - 是大规模过时;“newforms”到“形式”即使Django的1.0版本之前改名。)

0

您可以选择多种选择使用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 }); 
0

正如我所说in a similar question,一个建议是使用引导和Python。

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 %} 
(...)