Как я могу использовать django-clever-selects для фильтров вместо форм?

Я использую ChainedChoiceField из django-clever-selets для автоматического обновления поля, если другое поле изменяется, в форме, подобной этой:

class SomeForm(forms.Form):
    some_field = ChainedChoiceField(
        label=_("Field depending on parent field"),
        parent_field="some_parent_field",
        ajax_url=reverse_lazy('ajax:AjaxSomeView')
    )

Теперь мне нужна та же функциональность в FilterSet вместо этого в django rest framework. Что-то вроде этого:

from django_filters.rest_framework import filters
from django_filters.rest_framework import filterset

class ChainedChoiceFilter(filters.ChoiceFilter): # This does not work, it's just a concept
    field_class = ChainedChoiceField


class SomeFilterSet(filterset.Filterset):
    some_field = ChainedChoiceFilter(
        label=_("Field depending on parent field"),
        parent_field="some_parent_field",
        ajax_url=reverse_lazy('ajax:AjaxSomeView')
    )

Есть ли способ сделать это?

AS Much I have understood your problem you want to achive cascading dropdown in the form template you want to style that . you can использовать этот пример кода

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]    
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
</script>
</head>   
<body>

<h1>Cascading Dropdown Example</h1>

<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

</body>
</html>

для каскадного выпадающего списка отобразите элементы, используя look в каждой части

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_cascading_dropdown

пожалуйста, обратитесь к ссылке для демонстрации каскадного выпадающего меню

Вернуться на верх