Overriding django_admin's list_display into cascadingdropdown style - django

Question

I've been searching this for days, got some progress but something stop me.
I'm trying to override the django xadmin's list_display into "Chained Select Boxes"/"Cascading dropdown list" style, like the "country state city".
i've add some select javascript into '/xadmin/views/model_list.html'
but i do not know how can i transfer the data result from my database into this javascript.
Anybody could show me? thanks in advance.
{% extends base_template %}
{% load i18n %}
{% load xadmin_tags %}
{% block extrastyle %}
<style type="text/css">
.btn-toolbar{margin-top: 0;}
#content-block.full-content{margin-left: 0;}
</style>
{% endblock %}
{% block bodyclass %}change-list{% endblock %}
{% block nav_title %}{% if brand_icon %}<i class="{{brand_icon}}"></i> {% endif %}{{brand_name}}{% endblock %}
{% block nav_toggles %}
{% include "xadmin/includes/toggle_menu.html" %}
{% if has_add_permission %}
<i class="fa fa-plus"></i>
{% endif %}
<button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".content-navbar .navbar-collapse">
<i class="fa fa-filter"></i>
</button>
{% endblock %}
{% block nav_btns %}
{% if has_add_permission %}
<a href="{{add_url}}" class="btn btn-primary"><i class="fa fa-plus"></i>
{% blocktrans with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktrans %}</a>
{% endif %}
{% endblock nav_btns %}
{% block content %}
<div class="content-toolbar btn-toolbar pull-right clearfix">
{% view_block 'top_toolbar' %}
{% block toolbar_column %}
<div class="btn-group">
<a class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown" href="#">
<i class="fa fa-list-alt"></i> {% trans "Columns" %} <span class="caret"></span>
</a>
<ul class="dropdown-menu model_fields pull-right" role="menu" aria-labelledby="dLabel">
<li><i class="fa fa-refresh"></i> {% trans "Restore Selected" %}</li>
<li class="divider"></li>
{% for f, selected, flink in model_fields %}
<li><a href="{{flink}}">
{% if selected %}<i class="fa fa-check"></i>{% else %}<i class="fa fa-blank"></i>{% endif %}
{{f.verbose_name}}</a></li>
{% endfor %}
</ul>
</div>
{% endblock toolbar_column %}
{% block toolbar_layouts %}
<div class="btn-group layout-btns" data-toggle="buttons">
<label class="btn btn-default btn-sm layout-normal active">
<input type="radio"> <i class="fa fa-th-large"></i>
</label>
<label class="btn btn-default btn-sm layout-condensed">
<input type="radio"> <i class="fa fa-th"></i>
</label>
{% view_block 'top_layout_btns' %}
</div>
{% endblock toolbar_layouts %}
{% block toolbar_fullscreen %}
<div class="btn-group layout-btns" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default btn-sm layout-full"><i class="fa fa-expand"></i></button>
{% view_block 'top_check_btns' %}
</div>
{% endblock toolbar_fullscreen %}
{% view_block 'top_btns' %}
</div>
<ul class="pagination pagination-sm pagination-left pagination-inline">
{% view_block 'pagination' 'small' %}
</ul>
<form id="changelist-form" action="" method="post"{% view_block 'result_list_form' %}>{% csrf_token %}
{% view_block 'results_top' %}
<div class="results table-responsive">
{% if results %}
{% block results_grid %}
<div id="element_id">
<span class="FirstClass">FirstClassScene：
<select class="FirstClassScene">
{% for o in result_headers.cells %}
<option value="BeautySalon" >{{ o.field_name }}</option>
{% endfor %}
</select>
</span>
<span class="SecondClass">SecondClassScene：
<select class="SecondClassScene">
{% for o in result_headers.cells %}
<option value="hall" selected>{{ o.field_name }}</option>
{% endfor %}
</select>
</span>
<span class="ThirdClass">ThirdClassScene：
<select class="ThirdClassScene">
{% for o in result_headers.cells %}
<option value="ConsultingRoom" selected>{{ o.field_name }}</option>
{% endfor %}
</select>
</span>
</div>
<script src="jquery.cxselect.js"></script>
<script type="text/javascript" src=""></script>
<script>
$('#element_id').cxSelect({
url: 'cityData.min.json',
selects: ['FirstClassScene', 'SecondClassScene', 'ThirdClassScene'],
emptyStyle: 'none'
});
$(document).ready(function(){
var FirstClassSelect = $(".FirstClass").children("select");
var SecondClassSelect = $(".SecondClass").children("select");
FirstClassSelect.change(function(){
var FirstClassValue = $(this).val();
if( FirstClassValue != ""){
if(!FirstClassSelect.data(FirstClassValue)){
$.post("ChainSelect",{keyword:FirstClassValue,type:"top"},function(data){
if (data.length != 0){
SecondClassSelect.html("");
$("<option value=''>please choose</option>").appendTo(SecondClassSelect);
for(var i = 0;i < data.length; i++ ){
$("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(SecondClassSelect);
}
SecondClassSelect.parent().show();
FirstClassSelect.next().show();
}else{
SecondClassSelect.parent().hide();
FirstClassSelect.next().hide();
}
FirstClassSelect.data(FirstClassValue,data);
},"json");
}else{
var data = FirstClassSelect.data(FirstClassValue);
if (data.length != 0){
SecondClassSelect.html("");
$("<option value=''>please choose</option>").appendTo(SecondClassSelect);
for(var i = 0;i < data.length; i++ ){
$("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(SecondClassSelect);
}
SecondClassSelect.parent().show();
FirstClassSelect.next().show();
}else{
SecondClassSelect.parent().hide();
FirstClassSelect.next().hide();
}
}
}else{
SecondClassSelect.parent().hide();
FirstClassSelect.next().hide();
}
});
</script>
{% endblock %}