数据库中的Django动态下拉列表

Question

我想开发一个Django应用程序,我希望拥有的功能之一是动态下拉列表...专门用于车辆制造和模型......选择一个特定的make会更新模型列表,只有那些模型属于那个....我知道这在javascript或jQuery中是可能的(如果有人有答案,这将是我的最佳选择),但我不知道如何去做.

此外,我希望制作,模型,年份和系列是常见的,然后其他属性,如颜色,传输等变量,以便只需要为新车辆输入品牌,型号,年份和系列.任何想法都将受到高度赞赏.

Answer 1

你提到的三件事是普通的,品牌,型号,年份,将是3个输入值.当给予服务器时,包含详细信息的对象将返回到调用页面.该页面将解析对象详细信息(使用JavaScript),并更新UI以将其显示给用户.

从Django方面来看,需要设备来获取3个输入,并返回输出.从客户端,需要有设施将3个输入传递给服务器,然后适当地解析服务器的响应.

Django有一个REST api框架,可以很容易地添加上面提到的"api" - 活塞.使用Piston,您只需要为该资源创建一个URL,然后添加一个处理程序来处理它.(你仍然需要浏览Piston文档,但是这应该可以让你知道它的外观)

urls.py:
vehicle_details = Resource(handler=VehicleDetails)
url(r'^vehicle/(?<make>.*)/(?<model>.*)/(?<year\d{2,4}/(?P<emitter_format>[a-z]{1,4}), vehicle_details, name='vehicle_details'),

handler.py:
class VehicleDetails(BaseHandler):
    methods_allowed = ('GET',)
    model = Vehicles  #whatever your Django vehicle model is

    def read(self, request, *args, **kwargs):
        # code to query the DB and select the options
        # self.model.objects.filter()...            
        # Build a custom object or something to return

        return custom_object

这只是设置网址www.yoursite.com/vehicle/[make]/[model]/[year]/json返回JSON中的自定义数据对象,以便jquery进行解析.

在客户端,您可以使用jquery来设置事件(绑定),这样当所有3个下拉列表都选择了一个值时,它将对api URL执行$ .get().当它返回结果时,它将它传递给Jquery JSON解析器,并将自定义对象作为javascript对象提供.然后可以使用该对象填充更多下拉菜单.

(大警告,我只是写了下面的内容,所以它不是要复制和粘贴.这只是为了一般的想法.)

<script type="text/javascript">

    // On document load
    $(function() {
        $('#dropdown_make').bind('change', checkForValues());
        $('#dropdown_model').bind('change', checkForValues());
        $('#dropdown_year').bind('change', checkForValues());
    });

    function checkForValues() {
        if ($('#dropdown_make').val() && $('#dropdown_model').val() && $('#dropdown_year').val())
            updateOptions();        
    }

    function updateOptions() {
        url = '/vehicle/';
        url += $('#dropdown_make').val() + '/';
        url += $('#dropdown_model').val() + '/';
        url += $('#dropdown_year').val() + '/';
        url += 'json/';
        $.get(url, function(){
            // Custom data object will be returned here
        })
    }
</script>