Блог

Главная - Вопросы по программированию - Django: получение выпадающих значений для FormField

Django: получение выпадающих значений для FormField

#html #django #django-models #jquery-select2 #modelform

#HTML #django #django-модели #jquery-select2 #modelform

Вопрос:

Цель состоит в том, чтобы заставить выпадающий список работать.

Обычно никаких проблем при загрузке всей модели / ModelForm в html-шаблон в виде {{ form }}

Моя цель — приведенный ниже фрагмент html-кода, но вместо этого {{ form }} я хотел бы передать подмножество {{ form.car_model_make }} и позволить Django автоматически создавать все параметры <option value="BWM">BMW</option> … и т.д.

 # models.py
class Product(models.Models):
    car_model_make = models.CharField(default='B', max_length=1, blank=True, choices=CAR_TYPE)
    status_is_secondhand = models.BooleanField(blank=True)

# forms.py
class ProductForm(ModelForm):
    class Meta:
        model = Product
        fields = ('__all__')

# views.py
class ProductFormView(FormView):
    form_class = ProductForm

    def form_valid(self, form):
        form.save()
        return super().form_valid(form)

    def get_success_url(self):
        return reverse('index')

# urls.py
urlpatterns = [
    path('', index, name='index'),
    path('product/', ProductFormView.as_view(template_name='product/product.html'), name='product'),
]

Выбор CAR_TYPE — это список, содержащий «BMW, Mercedes, Audi».

Пытаюсь добиться этого:

Когда я заменяю:

   <option value="BWM">BWM</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Audi">Audi</option>

в приведенном ниже фрагменте HTML-кода
с помощью 

 {{ form.car_model_make }}

Я получаю «Результаты не найдены»

с помощью 

 <option> {{ form.car_model_make }} </option>

Я получаю список вариантов (BMW, Mercedes, Audi), но их нельзя выбрать

Однако с 

     <option {{ form.car_model_make }} </option>

Это работает, но я получаю предупреждение, что тег start не закрыт. Если я закрою тег, я получу символ тега «>», также напечатанный в раскрывающемся списке.

тот же результат получен для: <option value=" {{ form.car_model_make }} "></option>

Я нахожусь в неведении, и метод проб и ошибок не дает мне желаемого решения. Как мне это сделать?

 <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>

<div class="container">

  <div class="col-sm-12 mg-t-10 mg-sm-t-0">
    <select class="form-control select2"
            style="width: 100%;"
            data-placeholder="Choose Car Make"
            >
      <option value="BWM">BWM</option>
      <option value="Mercedes">Mercedes</option>
      <option value="Audi">Audi</option>

    </select>
  </div>

</div>

</body>
</html>

Комментарии:

1. пожалуйста, укажите ваш forms.py файл

2. обновлены представления, формы, URL-адреса, модели

3. вместо замены параметров замените весь select на {{ form.car_model_make }}

4. Спасибо, единственное предостережение в том, что я теряю форматирование, выпадающие списки по умолчанию не очень хороши. Лучше всего для дизайна, если бы я мог придерживаться одного типа форматирования, такого как Select2 или Crispy

5. Вы можете переопределить виджет, чтобы задать класс и заполнитель docs.djangoproject.com/en/2.1/topics/forms/modelforms /…

Ответ №1:

Похоже, что есть два шага, чтобы получить то, что вы ищете.

  1. Получение выбранного для отображения:

вместо замены параметров замените весь select на {{ form.car_model_make }}

  1. Пользовательское форматирование для виджета:

Следуя документации по ModelForm Django, вы можете переопределить виджет, чтобы настроить внешний вид, что-то похожее на следующее:

     widgets = {
        'car_model_make': Select(attrs={
            'class':"form-control select2",
            'style':"width: 100%;",
            'data-placeholder':"Choose Car Make"}),
    }